返回

如何将 Vue.js 应用程序无缝部署到子目录？

vue.js

如何将 Vue.js 应用程序部署到子目录

问题

在将 Vue.js 应用程序部署到根目录时，一切正常。然而，当部署到子目录时，所有链接都会失效。

解决方法

1. 添加基准 URL

在应用程序的 index.html 文件中，添加以下代码：

<base href="/dist/">

这会为所有相对路径设置一个基础 URL，包括 Webpack 生成的资产路径。

2. 配置 Webpack

在 Webpack 配置中，将 output.publicPath 选项设置为与基准 URL 相同的路径：

module.exports = {
  // ...
  output: {
    // ...
    publicPath: '/dist/',
  },
  // ...
};

这将确保 Webpack 生成的资产文件使用正确的路径。

3. 更新 Web 服务器配置

对于 Apache 或 Nginx 等 Web 服务器，需要更新配置以正确重写对资产文件的请求：

Apache

RewriteEngine On
RewriteRule ^/dist/(.*)$ /dist/$1 [L]

Nginx

location /dist/ {
  alias /dist/;
}

检查部署

完成这些步骤后，将应用程序部署到子目录。检查所有链接、图像和字体是否加载正确。

附加说明

  • 确保 Web 服务器配置正确，Webpack 生成的资产文件位于正确目录中，并且已清除浏览器缓存。
  • 也可使用 Vue Router 的 base 选项设置基准 URL。

常见问题解答

1. 部署后仍然出现问题怎么办？

检查 Web 服务器配置，确保 Webpack 生成的资产文件位于正确目录中，并已清除浏览器缓存。

2. 如何使用 Vue Router 的 base 选项？

在 router.js 文件中，使用 VueRouter 实例设置 base 选项：

import VueRouter from 'vue-router';

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

3. 如何解决 Apache 中 404 错误？

确保已启用 mod_rewrite 模块，并在 .htaccess 文件中包含以下代码：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^/dist/(.*)$ /dist/$1 [L]
</IfModule>

4. 如何解决 Nginx 中 404 错误？

确保已安装 rewrite 模块，并在 /etc/nginx/sites-available/default 配置文件中添加以下代码：

location /dist/ {
  alias /dist/;
}

5. 部署到 GitHub Pages 时如何设置基准 URL？

在 GitHub Pages 存储库的 package.json 文件中，添加以下脚本：

{
  "scripts": {
    "deploy": "cross-env BASE_URL=/dist/ vue-cli-service build"
  }
}

然后，使用以下命令部署：

npm run deploy