vue.config.js設定publicPath

使用vue-cli4建置新專案內
webpack的設定已經被包裝在整個架構下
大多數預設值即可符合開發需求
若需要手動執行webpack設定
則是寫在根目錄的vue.config.js內
通常會需要設定的部分包括
publicPath 預設是以/為路徑
因此產生出來的html檔案內所有的css 或js 路徑
都會是對應到根目錄的/js/xxx或 /css/xx的位置
如果你build出來的檔案是要放在web server的根目錄下
也就是http://localhost/下執行 這樣可以正常顯示

但如果是放在如http://localhost/abc/def/xxx目錄下
就會有找不到相關檔案的問題

必須將publicPath設定為'./'才會讓build出的檔案
可以放在任意目錄下執行

以下為範例

 const path = require('path')  
 module.exports = {  
  publicPath: './', // 預設為/ 所有html下的js css 連結都會是/js/xx,在輸出到web server 路徑會有問題,需用./  
  outputDir: 'www', // 輸出路徑  
  assetsDir: '', // 要輸出的asset目錄,設定hello,則會輸出成 hello/js/xxx,  
  devServer: {  
   port: 1234,  
   open: true  
  },  
  chainWebpack: config => {  
   config.module  
    .rule('yaml')  
    .test(/\.ya?ml$/)  
    .use('js-yaml-loader')  
    .loader('js-yaml-loader')  
    .end()  
   config.resolve.alias  
    .set('@@', path.resolve(__dirname)) // @@ 代替根目錄  
  }  
 }