如何部署Vue.JS MPA（多页应用）

Question

我使用vue.config.js方法创建了一个多页面应用程序，没有遇到任何问题。我创建了一个生产构建，我可以访问主页，但我无法访问其他页面，例如关于我们、作品集等。

可能出现了什么问题？如何解决？是.htaccess的问题吗？

以下是我的vue.config.js代码：

module.exports = {
    pages: {
      index: {
        entry: './src/pages/Home/main.js',
        template: 'public/index.html',
        title: 'Welcome to Appclust',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      },
      about:{
        entry: './src/pages/About/main.js',
        template: 'public/index.html',
        title: 'About us',
        chunks: ['chunk-vendors', 'chunk-common', 'about']
      },
      portfolio:{
        entry: './src/pages/Portfolio/main.js',
        template: 'public/index.html',
        title: 'Portfolio',
        chunks: ['chunk-vendors', 'chunk-common', 'portfolio']
      },
      testimonials:{
        entry: './src/pages/Testimonials/main.js',
        template: 'public/index.html',
        title: 'Testimonials',
        chunks: ['chunk-vendors', 'chunk-common', 'testimonials ']
      },
      careers:{
        entry: './src/pages/Careers/main.js',
        template: 'public/index.html',
        title: 'Careers',
        chunks: ['chunk-vendors', 'chunk-common', 'careers']
      },
      contact:{
        entry: './src/pages/Contact/main.js',
        template: 'public/index.html',
        title: 'Contact',
        chunks: ['chunk-vendors', 'chunk-common', 'contact']
      }
    }
  }

这是我的文件结构 生产文件

- Being MR.G

---

对于像多页面这样的任务，我建议使用Nuxt而不是Vue CLI。 - bill.gates

你最终解决了这个问题吗？ - 845614720

Answer 1

1. 在vue-router中启用mode:history以获取美观的URL，而无需使用哈希
2. 由于您的项目从一开始就是SPA，因此在新访问/刷新路由后，爬虫/服务器无法识别您的路由（因为/about缺少它所期望的index.html）。
3. 是的，您可以在.htaccess中设置重定向规则来处理缺失的路由。

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# otherwise use history router
RewriteRule ^ /index.html

4. 可选：如果您希望为每个路由生成预渲染的静态HTML文件，prerender-spa-plugin 是一个很好的项目构建补充。如果您想从头开始构建MPA，请选择NUXT。

- SC Kim

---

会用 .htaccess 吗？ - Being MR.G

是的，它应该能够完成任务。之前使用AngularJS和共享托管解决过类似问题。 - SC Kim

我应该复制粘贴相同的内容吗？？我的意思是你给的htaccess文件？还是应该进行一些修改？我复制粘贴了相同的内容，但无论我点击哪个页面，它都会转到主页或索引页面。我删除了这行"# otherwise use history router RewriteRule ^/index.html"，然后在尝试导航到其他页面时出现错误。 - Being MR.G

@BeingMR.G 可能会有一些变化，你可以在这里了解更多关于Vue的历史模式：https://router.vuejs.org/zh/guide/essentials/history-mode.html#example-server-configurations - SC Kim

谢谢，我已经解决了。你知道如何在MPA中添加元标签吗？由于我没有使用Nuxt，我不知道如何在每个页面上添加元描述。 - Being MR.G

您可以使用vue-meta来动态设置关键字、描述和标题等。它与NUXT和Vue兼容。如果解决了您的问题，请友善地打个勾 :) 万岁 - SC Kim