vue-cli3 vue.config.js常用的配置
基础:
module.exports = { // 选项... }
使用publicPath找到服务端的路径 ( 后端api和项目在同一目录下 )
module.exports = { publicPath: './' }
构建项目时打包的位置
module.exports = { outputDir: 'dist', }
eslint代码检测
lintOnSave : ture | false | 'error'
devserve相关配置
devServer: { open: true,//设置自动打开 port: 8000,//设置端口 proxy: { //设置代理 '/axios': { target: 'http://101.15.22.98', changeOrigin: true, secure: false, //如果是http接口,需要配置该参数 pathRewrite: { '^/axios': '' } } } }
对内部 webpack 配置 ( 链式操作 )
const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) }
chainWebpack: () =>{ config.resolve.alias .set('@', resolve('src')) .set('views', resolve('src/views')) .set('assets', resolve('src/assets')) // ...... }
vue.config.js
1 //打包压缩 取出console.log 2 // const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 3 4 const CompressionWebpackPlugin = require('compression-webpack-plugin'); 5 const productionGzipExtensions = ['js', 'css']; 6 7 // const env = process.env.NODE_ENV; 8 9 const path = require('path'); 10 11 function resolve(dir) { 12 return path.join(__dirname, dir) 13 } 14 15 module.exports = { 16 publicPath: './',//打包后设置静态资源路径 17 lintOnSave: false, 18 19 chainWebpack: (config) => { 20 21 config.resolve.alias 22 .set('@', resolve('src')) 23 .set('assets', resolve('src/assets')) 24 .set('components', resolve('src/components')) 25 .set('views', resolve('src/views')) 26 .set('static', resolve('src/static')) 27 }, 28 29 configureWebpack: (config) => { 30 if (process.env.NODE_ENV === "development") { 31 config.devtool = 'source-map' 32 } else { 33 34 config.plugins.push(new CompressionWebpackPlugin({ 35 algorithm: 'gzip', 36 test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`), 37 threshold: 10240, 38 minRatio: 0.8, 39 })); 40 41 // config.plugins.push( 42 // new UglifyJsPlugin({ 43 // uglifyOptions: { 44 // compress: { 45 // drop_debugger: true, // console 46 // drop_console: true, 47 // }, 48 // }, 49 // sourceMap: false, 50 // parallel: true, 51 // }), 52 // ) 53 } 54 }, 55 56 devServer: { 57 open: true,//设置自动打开 58 port: 8000,//设置端口 59 /*proxy: { 60 //设置代理 61 '/axios': { 62 target: 'http://101.15.22.98', 63 changeOrigin: true, 64 secure: false, //如果是http接口,需要配置该参数 65 pathRewrite: { 66 '^/axios': '' 67 } 68 } 69 }*/ 70 } 71 72 };