vue中打包之后的dist文件不放在服務器的根目錄下

在工作當中，我使用webpack打包的dist，由於管理的問題，無法被放在服務器根目錄下 ，但在目前的vue配置，dist不放在根目錄下，訪問頁面會成為一片空白，於是便要對vue框架的config進行配置修改。

 

首先對vue中config文件夾的index.js做配置，將build.assetsPublicPath由絕對路徑改為相對路徑

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',   //原本默認為 / 改為 ./相對路徑

  }

這樣就可以放在其他目錄下訪問了！

然后還會出現一個問題，dist打包的圖片在服務器上可能出現無法訪問的情況，這種情況多數是因為圖片路徑不對，所以我們還需要對vue的build文件下的utils.js做修改，將generateLoaders方法中判斷options.extract的return中添加 publicPath:'../../'，請注意publicPath的../，與你后端所放dist的層級有關。

  function generateLoaders (loader, loaderOptions) {
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'    //這個../與dist所在層級有關
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }