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.alias22 .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, // console46 // 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 };

 

相关文章