vue history 模式打包部署在域名的二级目录的配置指南

Vue.js是一个现代化的前端框架，在开发过程中，常常需要部署到服务器上面，正常情况下路由模式一般使用的是哈希(#)模式，但是对于希望使用history模式进行路由的同学，部署在二级目录上面还是比较复杂的，下面是对此的一些详细讲解。

原理介绍

Vue.js 使用 HTML5 的 History API 特性，它允许在浏览历史记录中向前或向后切换，而不是在 URL 中添加哈希值来模拟一个完整的 URL 的变化。

但是，在应用程序部署到服务器的子目录时，设置 base URL 是非常重要的。

例如，如果应用程序的位置是 http://www.example.com/app/，则应该设置 router 的 键 base: '/app/'。

此时，当在页面中进行路由跳转时，Vue Router 会知道它需要添加 '/app/' 前缀来构建正确的 URL。

部署步骤

1.设置 Vue Router

在设置 Vue Router 时，我们需要使用 base 选项来指定我们部署到二级目录的 URL 前缀，例如：

const router = new VueRouter({
  mode: 'history',
  base: '/subdirectory/',
  routes: [
    // ...
  ]
})

2.配置 Web 服务器

接下来，需要注意的就是我们部署的 Web 服务器如何配置支持 history 模式和二级目录。

对于 Apache 服务器，可以在 .htaccess 文件中添加下面这段代码：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /subdirectory/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /subdirectory/index.html [L]
</IfModule>

对于 Nginx 服务器，需要在 server 配置块中添加以下代码：

location /subdirectory/ {
  try_files $uri $uri/ /subdirectory/index.html;
}

3.修改 publicPath

最后，在构建生产环境时，需要在 vue.config.js 文件中修改 publicPath 来指定构建生成的静态资源根目录。

module.exports = {
  publicPath: '/subdirectory/'
  // ...
}

示例说明

示例1：设置为根目录

如果您要部署到根目录，只需将 base 设置为空字符串即可：

const router = new VueRouter({
  mode: 'history',
  base: '',
  routes: [
    // ...
  ]
})

示例2：设置子目录

在这个例子中，我们将 base 设置为 /my-app/，并且将 Vue.js 应用程序部署到 http://www.example.com/my-app/。

首先，在 Vue.js 应用程序的跟目录执行：

$ vue create my-app
$ cd my-app

然后，为我们的 Vue.js 应用程序创建一个子目录：

$ mkdir -p public/my-app/
$ mv dist/* public/my-app/

最后，在 public/my-app/ 目录中创建一个 .htaccess 文件：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /my-app/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /my-app/index.html [L]
</IfModule>

这样，我们就可以成功部署一个 Vue.js 应用程序到 http://www.example.com/my-app/ 了。