vue - vue的配置文件vue.config.js介绍_vue.config.js publicpath

前言：

注意：
使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build 文件夹，若需要进行相关配置，需在项目目录下新建文件 vue.config.js ;如下：

常用配置项如下：

注意：baseUrl从 Vue CLI 3.3 起已弃用从而使用publicPath来替代；

/* 引入打包分析插件 */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/* 引入压缩插件 但是导致项目启动的比较慢*/
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

let isProduction = process.env.NODE_ENV === 'production'; // 判断是否是生产环境
let isTest = process.env.NODE_ENV === 'test'; // 判断是否是测试环境

// 服务端ip  -- Uat环境
const api = 'http://10.1.12.181:26341';
// 自己启动的node服务 代理到本地
const nodeApi = 'http://127.0.0.1:3000';

module.exports = {
  /* 打包后的文件夹名字及路径  根目录下 */
  outputDir: 'dist/video',

  /* 生产的项目名   development是开发环境 可以用三元运算符*/
  publicPath: process.env.NODE_ENV === 'production' ? '/video/' : '/',

  /* 保存时是否校验 */
  lintOnSave: false,

  /* 开发环境跨域情况的代理配置 */
  devServer: {
    https: false,   // 链接是否使用https访问 但可能在微信中不能打开（安全性问题） 不写此行配置默认 使用http协议打开
    port: '31001',  // 指定要监听请求的端口号
    open: true,     // 是否运行好直接在默认浏览器打开
    inline: true,   // 用于设置代码保存时是否自动刷新页面。
    hot: true,      // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）

    disableHostCheck: true, //可以被外网访问

    /* 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。两种写法*/
    // overlay: true, // 第一种
    overlay: {
      //第二种
      warnings: false, //是否警告
      errors: false,
    },

    /* 接口代理器设置 可以配置多个*/
    proxy: {
      '/backend': {
        // 实际访问的服务器地址
        target: nodeApi,
        // 控制服务器收到的请求头中Host字段的值  host就是主机名加端口号  实际上就是欺骗后端服务器
        changeOrigin: true,
        // 是否启用websockets
        ws: false,
        // 重写请求路径  开头是/api的替换为 空串
        // pathRewrite: { '/api': '' },
      },
    },
  },

  /* css相关设置 */
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin  开启extract后，组件样式以内部样式表的形式加载的, 打包的结果会多出一个 css 文件夹以及css 文件。
    sourceMap: true, // 开启 CSS source maps?

    /* 向所有 Sass/Less 样式传入共享的全局变量 */
    loaderOptions: {
      //注意：在 sass-loader v8 中，这个选项名是 "prependData"  global.scss这里面定义的是一些全局变量
      scss: {
        prependData: '@import "~@/assets/scss/global.scss";',
      },
    },
  },

  /* webpack相关配置
   *该对象将会被 webpack-merge 合并入最终的 webpack 配置
   */
  configureWebpack: (config) => {
    // 生产环境配置
    if (process.env.NODE_ENV === 'production') {
      /* js 压缩 */
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            uglifyOptions: {
              compress: {
                drop_debugger: true,
                drop_console: true, // 生产环境自动删除console
              },
              warnings: false,
            },
            sourceMap: false,
            parallel: true, // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
          },
        })
      );
    } else {
      // 测试环境开启打包分析
      config.plugins.push(new BundleAnalyzerPlugin());
    }
  },

  /* 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作) */
  chainWebpack: (config) => {
    /* 关闭 console.log 生产环境
    如果为了安全起见，需要在正式环境关闭调试的话，可以在vue.config.js文件里加入以下代码*/
    config.optimization.minimizer('terser').tap((args) => {
      // 移除 console*
      args[0].terserOptions.compress.drop_console = true;
      // 移除 debugger
      args[0].terserOptions.compress.drop_debugger = true;
      // 移除 console.log
      args[0].terserOptions.compress.pure_funcs = ['console.log'];
      // 去掉注释 如果需要看chunk-vendors公共部分插件，可以注释掉就可以看到注释了
      args[0].terserOptions.output = {
        comments: false,
      };
      return args;
    });

    // 设置路径别名 
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
     

    // 压缩图片插件
    config.module
      .rule('images')
      /* 注意会报这个错误 Cannot find module 'imagemin-gifsicle' 需要下载cnpm install --save-dev image-webpack-loader 才有效*/
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.8, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 },
      });

  },

  /* 第三方插件配置 */
  pluginOptions: {
    'process.env': {
      NODE_ENV: '"development"',
    },
    // 我这里用的是 vue-cli-plugin-mock 插件；用来开发前期模拟后端的请求
    // debug 为true时 vscode的控制台会打印接口日志
    // mock: { entry: './mock/index.js', debug: false },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

常用配置项说明：

1，outputDir

打包后的文件输出路径，比如：dist/video就是默认在根目录下面新建 dist目录和video文件夹(打包好的包)

outputDir: 'dist/video',
1

2，publicPath

publicPath是部署应用包时的基本 URL；写法上可以使用三元运算符进行判断是否是生产环境和开发环境； 这个配置在项目部署时比较重要；详细介绍见这篇文章：vue中的publicPath讲解

publicPath: process.env.NODE_ENV === 'production' ? '/video/' : '/',
1

注意：baseUrl从 原先的Vue CLI 3.3版本起被已弃用从而使用publicPath来替代；

3，lintOnSave

设置是否在开发环境下每次保存代码时都启用eslint进行验证。

 /* 保存时是否校验 */
  lintOnSave: false,
1
2

4，devServer模块

此模块也比较重要，涉及到开发时项目的一些基本配置和解决接口的跨域问题( Node代理)；

 /* 开发环境跨域情况的代理配置 */
  devServer: {
    https: false,   // 链接是否使用https访问 但可能在微信中不能打开（安全性问题） 不写此行配置默认 使用http协议打开
    port: '31001',  // 指定要监听请求的端口号
    open: true,     // 是否运行好直接在默认浏览器打开
    inline: true,   // 用于设置代码保存时是否自动刷新页面。
    hot: true,      // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）

    disableHostCheck: true, //可以被外网访问

    /* 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。两种写法*/
    // overlay: true, // 第一种
    overlay: {
      //第二种
      warnings: false, //是否警告
      errors: false,
    },

    /* 接口代理器设置 可以配置多个*/
    proxy: {
      '/backend': {
        // 实际访问的服务器地址
        target: nodeApi,
        // 控制服务器收到的请求头中Host字段的值  host就是主机名加端口号  实际上就是欺骗后端服务器
        changeOrigin: true,
        // 是否启用websockets
        ws: false,
        // 重写请求路径  开头是/api的替换为 空串
        // pathRewrite: { '/api': '' },     
      },
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

proxy中的参数 target是要代理的后端接口ip；changeOrigin：true设置跨域请求； ws: true如果要代理 websockets，配置这个参数；pathRewrite：{ '/api': '' }为重写路径，我这样设置的效果为接口开头是/api的就替换为空，这个要根据实际情况进行变换；

5，css相关设置

 css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin  开启extract后，组件样式以内部样式表的形式加载的, 打包的结果会多出一个 css 文件夹以及css 文件。
    sourceMap: true, // 开启 CSS source maps?

    /* 向所有 Sass/Less 样式传入共享的全局变量 */
    loaderOptions: {
      //注意：在 sass-loader v8 中，这个选项名是 "prependData"  global.scss这里面定义的是一些全局变量
      scss: {
        prependData: '@import "~@/assets/scss/global.scss";',
      },
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12

6，webpack相关配置

webpack配置分为两个配置模块：configureWebpack和chainWebpack配置项；

1，配置 configureWebpack有两种写法：

第一种：调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}
1
2
3
4
5
6
7
8

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

第二种：如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}
1
2
3
4
5
6
7
8
9
10

我配置的：我这里使用了第二种的配置写法；判断vue运行环境进行有条件的进行配置；在生产环境中我使用 UglifyJsPlugin插件进行对js代码的压缩；在测试环境下面 我使用了 BundleAnalyzerPlugin打包分析工具，用于分析代码的构成和大小；

configureWebpack: (config) => {
    // 生产环境配置
    if (process.env.NODE_ENV === 'production') {
      /* js 压缩 */
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            uglifyOptions: {
              compress: {
                drop_debugger: true,
                drop_console: true, // 生产环境自动删除console
              },
              warnings: false,
            },
            sourceMap: false,
            parallel: true, // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
          },
        })
      );
    } else {
      // 测试环境开启打包分析
      config.plugins.push(new BundleAnalyzerPlugin());
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2，配置 chainWebpack：

chainWebpack是可以进行链式操作的，它允许我们更加精确的进行内部配置，在对于一些loader 时非常有用；
如下比较vue的chainWebpack链式配置和webpack中的webpack.config.js文件‘：左侧是vue的右侧是webpack的配置文件：

更加详细的配置说明请见vue-cli官网

下面是我常用的chainWebpack配置： 主要配置了关闭vconsole和配置路径别名以及 使用 image-webpack-loader图片压缩插件；

  /* 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作) */
  chainWebpack: (config) => {
    
    /* 关闭 console.log 生产环境
    如果为了安全起见，需要在正式环境关闭调试的话，可以在vue.config.js文件里加入以下代码*/
    config.optimization.minimizer('terser').tap((args) => {
      // 移除 console*
      args[0].terserOptions.compress.drop_console = true;
      // 移除 debugger
      args[0].terserOptions.compress.drop_debugger = true;
      // 移除 console.log
      args[0].terserOptions.compress.pure_funcs = ['console.log'];
      // 去掉注释 如果需要看chunk-vendors公共部分插件，可以注释掉就可以看到注释了
      args[0].terserOptions.output = {
        comments: false,
      };
      return args;
    });

    // 设置路径别名 
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
     

    // 压缩图片插件
    config.module
      .rule('images')
      /* 注意会报这个错误 Cannot find module 'imagemin-gifsicle' 需要下载cnpm install --save-dev image-webpack-loader 才有效*/
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.8, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 },
      });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

7，pluginOptions(第三方插件配置)

pluginOptions模块是第三方插件配置：我这边配置了 使用vue-cli-plugin-mock 模拟后端的请求数据流程；不想使用此插件的时候直接注释掉即可；

 /* 第三方插件配置 */
  pluginOptions: {
    // 我这里用的是 vue-cli-plugin-mock 插件；用来开发前期模拟后端的请求
    // debug 为true时 vscode的控制台会打印接口日志
    mock: { entry: './mock/index.js', debug: false },
  },
1
2
3
4
5
6