背景： vue由于nginx代理服务上多了两级目录 如 aaa/web 导致页面静态资源404
项目技术栈： vue-cli4 webpack4
解决方案：
1. 考虑给路由加一个baseurl ， 由于hash模式不支持base url， 所有路由模式考虑history模式，在router文件里
var router = new Router({
routes,
mode: 'history',
base: process.env.NODE_ENV === 'production'?'/aaa/web/':'/' // 这里本地之所以不用二级路由主要是用了修改的代码不更新在页面上
})
2. vue.config.js 修改打包输出路径
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // history改为 ’./‘ 或 ’../../‘ '/aaa/web' 也是可以的， hash模式要 ’/‘
配置后打包部署发现页面已经可以正常加载出来了，但是我们的图片资源都是404 访问不到，接下来我们用url-loader来修改静态资源打包后的路径：
// webpack相关配置
chainWebpack: (config) => {
config.plugins.delete("preload-portal");
config.plugins.delete("prefetch-portal");
if (process.env.NODE_ENV === 'production') {
config.output.filename(`static/js/[name].${time}.js`).end();
config.output.chunkFilename(`static/js/[name].${time}.js`).end();
config.plugin('extract-css').tap(args => [{
filename: `static/css/[name].${time}.css`,
chunkFilename: `static/css/[name].${time}.css` // 这里是修改js打包目录，这里与本课题无关
}])
config
.module
.rule("images")
.test(/\.(jpg|png|gif)$/)
.use("url-loader")
.loader("url-loader")
.options({
limit:10,
outputPath: 'img', // 表示输入资源的目录
publicPath: process.env.NODE_ENV === 'production' ? '/aaa/web/img' : '/', // 这里是访问资源的目录， 不修改之前访问发现图片路径少了 aaa/web 两级目录
name: `[name].${time}.[ext]`,
esModule: false
})
.end()
config
.module
.rule("fonts")
.test(/\.(woff|ttf|eot)$/)
.use("url-loader")
.loader("url-loader")
.options({
limit:10,
outputPath: 'fonts',
publicPath: process.env.NODE_ENV === 'production' ? '../../fonts' : '/', // 字体文档目录 ， 如element组件字体
name: `[name].${time}.[ext]`,
})
.end()
}
},
网友评论