将 Vue-Cli 项目配置在网站的子路径下

[Dream4ever]

需求描述

在一个已经有内容的网站中，想把 Vue-Cli 编写的项目配置在网站的子路径下，就是像 a.com/abcd 这样，访问 a.com 显示主网站的内容，访问 a.com/abcd 则显示其它的内容。

解决过程

先是 Google vue-cli vue-router subpath，没找到可行的解决方案。

再 Google iis vue-router subpath，依然未果。

再 Google vue 项目 vue-router 子目录，看到了 Vue项目编译后部署在非网站根目录的解决方案 这篇文章。

文章大意是需要修改配置文件中的 assetsPublicPath 属性，让打包路径从根目录 / 变为设定的子目录 /abcd/。

同时还要修改 vue-router 的 base 属性，也从根目录 / 改为子目录 /abcd/。

所用的 vue-cli 是 3.9.3，所以具体需要修改的文件，路径和上面文章中的不一样。

vue-cli 新建的项目，默认没有 Vue 的配置文件，需要在根目录下新建 vue.config.js 这个文件，增加下面三行内容，设置打包路径。

module.exports = {
  publicPath: '/abcd/',
}

同时在 ./src/router.js 中，export default new Router({ ... }) 内增加一个字段：

  base: '/abcd/',

重新编译并运行项目，这个时候访问 localhost:8081/abcd/ 或者 a.com/abcd/，就能正常访问 Vue 项目了。

参考资料

• Vue项目编译后部署在非网站根目录的解决方案
• publicPath | COnfiguration Reference | Vue Cli：配置网站文件的打包路径
• base | API Reference | Vue Router：配置网站的路径