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