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')) // } }