Vue-cli打包后部署到子目录下的路径问题说明

默认情况下以当前域名为根目录向下访问。

举例，若需要部署到www.***.com/catalog1/catalog2/下，需要更改

1、config/index.js文件中，build下assetsPublicPath属性为'/catalog1/catalog2/'，如下：

默认情况下该值为'/'（该属性目测是webpack打包时的文件引用路径的基础路径）。

2、修改路由base属性为'/catalog1/catalog2/',如下：

其中mode设置为'history'可清除路径中的#（本地测试有效）。

设置完成后重新打包。

补充知识：vue-cli打包并配合nginx域名二级子目录

可以修改三个配置

1.路由

2.打包文件 config/index.js

3.nginx配置

try_files uri/ /admin/index.html

4.项目目录配置实例

项目路径 web/admin/index.html

我们需要在template，script，style下引用图片，如下。

比如

这里能用 @assets 是因为在 vue.config.js 里面设置了如下参数。

本地开发的时候，因为域名是 http://localhost:8080 ，也就是 / ，vue自动帮你转换成相对 / 路径。

build的时候，vue默认把图片路径指定在 / 下。图片地址也就是在 /img/xxx.jpg 。

如果项目部署在域名是 http://www.aaa.com/vue/ ， /img/xxx.jpg 自然找不到图片。

我们build的时候需要指定一个路径 /vue/ ，因为 vue/img/xxx.jpg 是正确的路径。

修改 vue.config.js 配置即可。

vue打包上线后经常会碰到静态资源路径找不到的问题。常见问题及解决方式如下：

解决方式：

打开config/index.js，将其中的assetsPubicPath的值改为‘./’

解决方式

更改图片文件的路径改为绝对路径或者生产环境的相对路径

---