vue打包后css路径_vue打包后引入js和css用相对路径引入

vue打包后html引入的js和css默认是绝对路径的，如下：

现在需要打包后是这样的：

需要怎么配置呢？

查看文档说把publicPath设置为'./'就可以了 ，

但设置后还是不行，还是绝对路径，

设置为'./static/'后,打包生成的是：

它好像是把'./'给去掉了，

于是我就有个大胆的想法：

将publicPath设置为：'././'

试一试 果然可以了。

咋子回事嘛？

在方法loadUserOptions中有这么一行：

//normalize some options

ensureSlash(resolved, 'publicPath')if (typeof resolved.publicPath === 'string') {

resolved.publicPath= resolved.publicPath.replace(/^\.\//, '')

}

意思就是说,你要是传进来的publicPath是以'./'开头的，我就把你开头这个'./'给换成'',

这也印证了以上的猜想。

总结：

想要将打包后的绝对路径改为相对路径，就得在vue.config.js里边(没有这个文件的在package.js同级目录新建一个)里边加上：publicPath: '././'即可：

module.exports ={

publicPath:'././',

outputDir:'dist'}

over

补充:

这样测试时候会有问题 , 项目跑不起来,

优化改成这样:

module.exports ={

publicPath: process.env.NODE_ENV=== 'development' ? './' : '././',

outputDir:'dist'}

over