码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-02-20 14:59:53      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:bpa   设置代理   icp   uglifyjs   检测   drop   const   pac   css   

基础:

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

 

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

标签:bpa   设置代理   icp   uglifyjs   检测   drop   const   pac   css   

原文地址:https://www.cnblogs.com/xinchenhui/p/12335593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!