webpack打包assetsPublicPath配置

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // css中源代碼： background-image: url(../assets/bgd.png);
  
    //assetsPublicPath: '/',     index.html:  src=/static/js/manifest.2ae2e69a05c33dfc65f8.js         css:  background-image:url(/static/img/bgd.934f452.png);
    //assetsPublicPath: './',     index.html:  src=./static/js/app.ee5d22bbbfaa3cfe658f.js             css:  background-image:url(static/img/bgd.934f452.png)
    //assetsPublicPath: '/dist',   index.html:  src=/dist/static/js/manifest.7dee6341ec362d8a22ac.js    css:  background-image:url(/dist/static/img/bgd.934f452.png)
    //assetsPublicPath: '/dist/', index.html: src=/dist/static/js/app.ee5d22bbbfaa3cfe658f.js css: background-image:url(/dist/static/img/bgd.934f452.png)
    proxyTable: {
      '/EzaYun': {
          target:'http://192.168.3.18:8080/Services',            //請求的目標地址的BaseURL
          ws:true,
          changeOrigin:true,                            //是否開啟跨域
          pathRewrite:{
          '^/EzaYun':''                                    //重新路徑，把EzaYun開頭的，替換成 ''
        }
      }
    },
    
    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

npm run build打包后，打包出來的文件結構如下，整個dist文件夾放到jboss的welcome-content目錄下，訪問首頁地址 http://192.168.3.11:8080/dist/#/

當 assetsPublicPath: '/'   
index.html 請求加載js文件就少了一級dist目錄   http://192.168.3.11:8080/static/js/app.ee5d22bbbfaa3cfe658f.js
期望正常的路徑是：   　　　　　　　　　　　　　　http://192.168.3.11:8080/dist/static/js/app.ee5d22bbbfaa3cfe658f.js

改成assetsPublicPath:./加載 index.html加載js文件正常，但是css加載背景圖片多了 /static/css 目錄

 　　　　　　　　　　http://192.168.3.11:8080/dist/static/css/static/img/bgd.934f452.png
期望正常的路徑是：   http://192.168.3.11:8080/dist/static/img/bgd.934f452.png

先記錄下這個問題，后續還是得在webpack配置上多學習。

//修改 vue.config.js 修改webpack配置 必須重啟

const path = require('path');
function resolve(dir){
    return path.join(__dirname,dir)
}

// cli3 配置webpack
module.exports={
  // eslint-loader 是否在保存的時候檢查
    lintOnSave:true,
    //對象形式
    // configureWebpack:{
    //     resolve:{
    //         alias:{
    //             'styles':resolve('src/assets/styles')
    //         }
    //     }
    // }
    //
    configureWebpack:(config)=>{
        if (process.env.NODE_ENV === 'production') {
            // 為生產環境修改配置...
            console.log("production:" + process.env.NODE_ENV)
          } else {
            // 為開發環境修改配置...
            console.log(process.env.NODE_ENV)
          }
       //直接修改配置
        config.resolve.alias['styles'] = resolve('src/assets/styles')
    }
    // ,
    // chainWebpack 寫法  它允許我們更細粒度的控制其內部配置: https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
    // chainWebpack: (config) => {
    //     config.resolve.alias
    //       .set('@', resolve('src'))
    //       .set('styles',resolve('src/assets/styles'))
    //   }

}