vue-cli3 vue.config.js常用的配置

Posted 2021-03-08 _Iniesta

基础：

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 };