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

文章目录

前言：

注意：

使用 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,// 是否启用websocketsws: 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].press.drop_console = true;// 移除 debuggerargs[0].press.drop_debugger = true;// 移除 console.logargs[0].press.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，outputDir

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

outputDir: 'dist/video',

2，publicPath

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

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

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

3，lintOnSave

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

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

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,// 是否启用websocketsws: false,// 重写请求路径 开头是/api的替换为 空串// pathRewrite: { '/api': '' },},},},

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";',},},},

6，webpack相关配置

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

1，配置configureWebpack有两种写法：

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

// vue.config.jsmodule.exports = {configureWebpack: {plugins: [new MyAwesomeWebpackPlugin()]}}

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

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

// vue.config.jsmodule.exports = {configureWebpack: config => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...} else {// 为开发环境修改配置...}}}

我配置的：我这里使用了第二种的配置写法；判断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());}},

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].press.drop_console = true;// 移除 debuggerargs[0].press.drop_debugger = true;// 移除 console.logargs[0].press.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 },});},

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

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

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