Vue-cli打包部署到子目录，如何确保路径正确无误？

本文共计352个文字，预计阅读时间需要2分钟。

默认情况下，以当前域名名为根目录指向下访问。例如，若需部署到www.***.com/catalog1/catalog2/下，需修改1、config/index.js文件中，将build下的assetsPublicPath属性设置为'/%2Fcatalog1%2Fcatalog2%2F'。如下所示：

jsonbuild: { assetsPublicPath: '/%2Fcatalog1%2Fcatalog2%2F'}

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

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

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

build: {

assetsPublicPath: '/catalog1/catalog2/',

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

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

export default new Router({ mode: 'history', base: '/catalog1/catalog2/', routes: [ { path: '/', name: 'indexContent', component: indexContent } ] })

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

设置完成后重新打包。