Vue2.x 路由添加前缀之打包注意事项

步骤一

修改 /public/index.html文件，静态资源路径，注意 config.js 前是没有左斜杠的 / ；

<script src="<%= BASE_URL %>config.js"></script>
<link rel="stylesheet" href="<%= BASE_URL %>main.css"/>

步骤二

修改vue.config.js或webpack.config.js，属性

• publicPath ：路由访问路径，与上述的 <%= BASE_URL %>对应。默认是 /，注意最后是有 /；
• outputDir：打包后的路径，默认在 dist 文件夹下。注意最后是没有 /；

module.exports = {
    // 默认 /
	publicPath: '/mynew/test/',
    // 默认 dist
	outputDir: 'dist/mynew/test',
    // ...
}

步骤三

如果 html 中有图片也要做对应的修改，目前没有更优解：

<img :src="/mynew/test/images/logo.png" width="100%" height="100%" />