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

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

<script src=js/app.f316dda1.js>

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

<script src=./js/app.f316dda1.js>

需要怎么配置呢？

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

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

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

<script src=static/js/app.f316dda1.js>

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

 

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

将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