vue-cli3全面配置详解

vue-cli3全面配置详解

vue-cli3-config
创建项目
配置环境变量
通过在package.json里的scripts配置项中添加–mode xxx来选择不同环境

在项目根目录中新建.env, .env.production, .env.analyz等文件

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过process.env.VUE_APP_BASE_API访问

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

.env serve默认的环境变量

NODE_ENV = 'development'
VUE_APP_BASE_API = 'https://demo.cn/api'
VUE_APP_SRC = 'https://wechat-timg.oss-cn-hangzhou.aliyuncs.com/demo'

.env.production build默认的环境变量

NODE_ENV = 'production'
VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_SRC = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'

.env.analyz 用于webpack-bundle-analyzer打包分析

NODE_ENV = 'production'
IS_ANALYZ = 'analyz'
VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_SRC = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'

修改package.json

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","analyz": "vue-cli-service build --mode analyz","lint": "vue-cli-service lint"
}

配置vue.config.js

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);module.exports = {baseUrl: './', // 默认'/'，部署应用包时的基本 URLoutputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录lintOnSave: false,runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本productionSourceMap: false, // 生产环境的 source mapparallel: require('os').cpus().length > 1,pwa: {}
};

配置proxy跨域

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
module.exports = {devServer: {// overlay: {//  warnings: true,//  errors: true// },open: IS_PROD,host: '0.0.0.0',port: 8000,https: false,hotOnly: false,proxy: {'/api': {target: process.env.VUE_APP_BASE_API || 'http://127.0.0.1:8080',changeOrigin: process.env.NODE_ENV === 'development' ? true : false,}}}
}

修复HMR(热更新)失效

module.exports = {chainWebpack: config => {// 修复HMRconfig.resolve.symlinks(true);}
}

添加别名

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);module.exports = {chainWebpack: config => {// 添加别名config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('components', resolve('src/components')).set('layout', resolve('src/layout')).set('base', resolve('src/base')).set('static', resolve('src/static'));}
}

添加打包分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {chainWebpack: config => {// 打包分析if (process.env.IS_ANALYZ) {config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{analyzerMode: 'static',}]);}}
}

配置externals
防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

module.exports = {configureWebpack: config => {config.externals = {'vue': 'Vue','element-ui': 'ELEMENT','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios'}}
}

去掉console.log
方法一：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {configureWebpack: config => {if (IS_PROD) {const plugins = [];plugins.push(new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_console: true,drop_debugger: false,pure_funcs: ['console.log']//移除console}},sourceMap: false,parallel: true}));config.plugins = [...config.plugins,...plugins];}}
}

方法二：使用babel-plugin-transform-remove-console插件

npm i --save-dev babel-plugin-transform-remove-console

在vue.config.js中配置

const plugins = [];
if(['production', 'prod'].includes(process.env.NODE_ENV)) { plugins.push("transform-remove-console")
}module.exports = {presets: [["@vue/app",{"useBuiltIns": "entry"}]],plugins: plugins
};

开启gzip压缩

npm i --save-dev compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;module.exports = {configureWebpack: config => {if (IS_PROD) {const plugins = [];plugins.push(new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: productionGzipExtensions,threshold: 10240,minRatio: 0.8}));config.plugins = [...config.plugins,...plugins];}}
}

还可以开启比gzip体验更好的Zopfli压缩详见https://webpack.js.org/plugins/compression-webpack-plugin/

npm i --save-dev @gfx/zopfli brotli-webpack-plugi

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const zopfli = require("@gfx/zopfli");
const BrotliPlugin = require("brotli-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;module.exports = {configureWebpack: config => {if (IS_PROD) {const plugins = [];plugins.push(new CompressionWebpackPlugin({algorithm(input, compressionOptions, callback) {return zopfli.gzip(input, compressionOptions, callback);},compressionOptions: {numiterations: 15},minRatio: 0.99,test: productionGzipExtensions}));plugins.push(new BrotliPlugin({test: productionGzipExtensions,minRatio: 0.99}));config.plugins = [...config.plugins,...plugins];}}
}

为sass提供全局样式，以及全局变量
可以通过在main.js中Vue.prototype.src=process.env.VUEAPPSRC;挂载环境变量中的配置信息，然后在js中使用src = process.env.VUE_APP_SRC;挂载环境变量中的配置信息，然后在js中使用src=process.env.VUEA​PPS​RC;挂载环境变量中的配置信息，然后在js中使用src访问。

css中可以使用注入sass变量访问环境变量中的配置信息

module.exports = {css: {modules: false,extract: IS_PROD,sourceMap: false,loaderOptions: {sass: {// 向全局sass样式传入共享的全局变量data: `@import "~assets/scss/variables.scss";$src: "${process.env.VUE_APP_SRC}";`}}}
}

在scss中引用

.home {background: url($src + '/images/500.png');
}

添加IE兼容

npm i --save @babel/polyfill

在main.js中添加

import '@babel/polyfill';

配置vue.config.js

const plugins = [];module.exports = {presets: [["@vue/app",{"useBuiltIns": "entry"}]],plugins: plugins
};

完整配置
安装依赖
代码如下:

npm i --save-dev compression-webpack-plugin babel-plugin-transform-remove-console @gfx/zopfli brotli-webpack-plugin

package.json

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","analyz": "vue-cli-service build --mode analyz","lint": "vue-cli-service lint"
}

vue.config.js

const plugins = [];
// if(['production', 'prod'].includes(process.env.NODE_ENV)) { 
//  plugins.push("transform-remove-console")
// }module.exports = {presets: [["@vue/app",{"useBuiltIns": "entry"}]],plugins: plugins
};
vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const zopfli = require("@gfx/zopfli");
// const BrotliPlugin = require("brotli-webpack-plugin");const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;module.exports = {baseUrl: './', // 默认'/'，部署应用包时的基本 URLoutputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录lintOnSave: false,runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本productionSourceMap: false, // 生产环境的 source mapconfigureWebpack: config => {// config.externals = {//   'vue': 'Vue',//   'element-ui': 'ELEMENT',//   'vue-router': 'VueRouter',//   'vuex': 'Vuex',//   'axios': 'axios'// }if (IS_PROD) {const plugins = [];plugins.push(new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_console: true,drop_debugger: false,pure_funcs: ['console.log']//移除console}},sourceMap: false,parallel: true}));plugins.push(new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: productionGzipExtensions,threshold: 10240,minRatio: 0.8}));// Zopfli压缩 https://webpack.js.org/plugins/compression-webpack-plugin/// plugins.push(//   new CompressionWebpackPlugin({//     algorithm(input, compressionOptions, callback) {//       return zopfli.gzip(input, compressionOptions, callback);//     },//     compressionOptions: {//       numiterations: 15//     },//     minRatio: 0.99,//     test: productionGzipExtensions//   })// );// plugins.push(//   new BrotliPlugin({//     test: productionGzipExtensions,//     minRatio: 0.99//   })// );config.plugins = [...config.plugins,...plugins];}},chainWebpack: config => {// 修复HMRconfig.resolve.symlinks(true);// 添加别名config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('components', resolve('src/components')).set('layout', resolve('src/layout')).set('base', resolve('src/base')).set('static', resolve('src/static'));// 打包分析if (process.env.IS_ANALYZ) {config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{analyzerMode: 'static',}]);}// 多页面配置，为js添加hash// config.output.chunkFilename(`js/[name].[chunkhash:8].js`)// 修改图片输出路径// config.module//  .rule('images')//  .test(/\.(png|jpe?g|gif|ico)(\?.*)?$/)//  .use('url-loader')//  .loader('url-loader')//  .options({//    name: path.join('../assets/', 'img/[name].[ext]')//  })},css: {modules: false,extract: IS_PROD,// 为css后缀添加hash// extract: {// filename: 'css/[name].[hash:8].css',// chunkFilename: 'css/[name].[hash:8].css'//}，sourceMap: false,loaderOptions: {sass: {// 向全局sass样式传入共享的全局变量// data: `@import "~assets/scss/variables.scss";$src: "${process.env.VUE_APP_SRC}";`data: `$src: "${process.env.VUE_APP_SRC}";`},// px转换为rem// postcss: {//  plugins: [//   require('postcss-pxtorem')({//    rootValue : 1, // 换算的基数//    selectorBlackList : ['weui', 'el'], // 忽略转换正则匹配项//    propList  : ['*']//   })//  ]// }}},pluginOptions: {// 安装vue-cli-plugin-style-resources-loader插件// 添加全局样式global.scss// "style-resources-loader": {//  preProcessor: "scss",//  patterns: [//   resolve(__dirname, "./src/scss/scss/variables.scss")//  ]// }},parallel: require('os').cpus().length > 1,pwa: {},devServer: {// overlay: {//  warnings: true,//  errors: true// },open: IS_PROD,host: '0.0.0.0',port: 8000,https: false,hotOnly: false,proxy: {'/api': {target: process.env.VUE_APP_BASE_API || 'http://127.0.0.1:8080',changeOrigin: true}}}
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/407438.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android 开发环境在 Windows7 下的部署安装

Android 开发环境在 Windows7 下的部署安装

Android SDK Android SDK 为 Android 应用的开发、测试和调试提了必要的API库和开发工具。 ADT Bundle 下载 如果你是一个android 开发新手，推荐你下载使用 ADT Bundle 以快速开始android 的开发，它提供了必要的 android sdk 组件和一个内置 ADT 的 Ecli…
阅读更多...
CSS之REM和EM的区别

CSS之REM和EM的区别

事实证明。rem 和 em 均有各自的优缺点。应给根据实际情况来判断其使用方式 1.如果这个属性是根据它的font-size进行测量，则该属性最好使用em 2.其他的一切事物均使用rem #
阅读更多...
Cisco路由器故障诊断技术(3)

Cisco路由器故障诊断技术(3)

Cisco路由器故障诊断技术(3)<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />3.4 trace命令 trace命令提供路由器到目的地址的每一跳的信息。它通过控制IP报文的生存期&#xff08;TTL&#xff09;字段来实现。TTL等于1的ICM…
阅读更多...
前端学习（3285）：立即执行函数四

前端学习（3285）：立即执行函数四

阅读更多...
《疯狂的简洁》书摘

《疯狂的简洁》书摘

头脑和常识催生简洁 复杂会让人带来安全感&#xff0c;复杂和简洁是一对矛盾&#xff0c;复杂不一定优于简洁 复杂可以变得很丑陋 一切始于简洁&#xff0c;坚持原则&#xff0c;抵御复杂&#xff0c;头脑聪慧且真心实意 人们喜欢事情的透明化 直率即简洁&#xff0c;迂回就是复…
阅读更多...
linux kill 关闭进程命令

linux kill 关闭进程命令

点评&#xff1a;杀死进程最安全的方法是单纯使用kill命令&#xff0c;不加修饰符&#xff0c;不带标志。 首先使用ps -ef命令确定要杀死进程的PID&#xff0c;然后输入以下命令&#xff1a; # kill -pid 注释&#xff1a;标准的kill命令通常都能达到目的。终止有问题的进…
阅读更多...
侯捷：搞Windows程序设计我们需要啥

侯捷：搞Windows程序设计我们需要啥

侯捷&#xff1a;搞Windows程序设计我们需要啥如果你是一位资深的Windows程序员&#xff0c;相信你对Jeffrey Richter一定不会陌生&#xff0c;是不是有些崇拜和景仰&#xff1f;如果你是一位刚涉足这个领域的Windows程序员&#xff0c;Jeffrey Richter是何许人也许你还不能立刻…
阅读更多...
CSS之vmin和vmax

CSS之vmin和vmax

vh和vm总是与视口的高度和宽度有关&#xff0c;与之不同的&#xff0c;vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关&#xff0c;取决于哪个更大和更小 例如&#xff0c;如果浏览器设置为1100px宽、700px高&#xff0c;1vmin会是较小的7px&#xff0c;而1vmax将是…
阅读更多...
前端学习（3286）：Aop

前端学习（3286）：Aop

阅读更多...
vue element-ui级联选择器选中后下拉框自动收起

vue element-ui级联选择器选中后下拉框自动收起

Cascader 级联选择器 数据渲染 通过 :options“options” 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props"{ checkStrictly: true }" 1、点击后下拉框自动收起实现 设置每次监听值变化的时候&#xff0c;把 dropDownVisible 属性设置为 false 即可。…
阅读更多...
CodeForces 444C 节点更新求变化值的和

CodeForces 444C 节点更新求变化值的和

http://vjudge.net/problem/viewProblem.action?id51622 题目大意&#xff1a; 给定一列n个数字&#xff0c;最初赋予值1到n 两个操作&#xff1a;1.将区间[l,r]内的数改为x&#xff0c;则这区间中所有数的改变值进行求和&#xff0c;即ansabs(a[l]-x)abs[a[l1]-x).....abs(a[…
阅读更多...
CSS之calc()使用

CSS之calc()使用

1.什么是calc() calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写&#xff0c;是css3的一个新增的功能&#xff0c;用来指定元素的长度 2.calc()能做什么&#xff1f; calc()能让你给元素的值做计算&#xff0c;你可以给一个div元…
阅读更多...
显示当前行号、文件名和函数名

显示当前行号、文件名和函数名

在编程时&#xff0c;有时需要知道当前的代码是在第几行&#xff0c;当前文件名是什么&#xff0c;以及当前执行的是哪个函数&#xff1f;下面的代码可以轻松地完成这种功能&#xff1a; #include <stdio.h>void test(){printf("Line:%d, File:%s, Function:%s\n&q…
阅读更多...
百安俱乐部关于“BotNet专题讨论”资料

百安俱乐部关于“BotNet专题讨论”资料

•BotNet专题讨论 演讲者&#xff1a;叶子 典型BotNet案件 •什么是BotNet •BotNet原理及其危害 BotNet的发展BotNet的形成 BotNet的传播 BotNet的控制 BotNet的危害•BotNet防范与处理 •BotNet的发展趋势分析 •典型BotNet程序的技术分析转载于:https://blog.51cto.com…
阅读更多...
Vue给项目添加进度条

Vue给项目添加进度条

前言 在PC端项目的开发过程中&#xff0c;有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况。那么如何才能成功添加进度条呢&#xff1f; 添加方式 用法1: 在拦截器中使用 1.引入插件Nprogress npm install --save nprogress 2.在main.js中引入对应的包文…
阅读更多...
显示当前行号、文件名和函数名(二)

显示当前行号、文件名和函数名(二)

为了测试__FILE__, __LINE__, __FUNCTION__&#xff0c; 又写了一个C版本的测试程序&#xff0c;源码如下&#xff1a; #include <iostream> #include <string>using namespace std;class CUser { private:int m_nId;string m_sName;public:CUser(int id, string …
阅读更多...
文件的删除和文件信息的读取

文件的删除和文件信息的读取

文件删除代码&#xff1a;<table border"1"> <tr> <td colspan"2" style"color: #660066;"> 删除文件&#xff1a; </td> </tr> …
阅读更多...
React开发（109）:引用错误 报错

React开发（109）:引用错误 报错

阅读更多...
vue与elementUI中给el-input绑定键盘按键--按键修饰符

vue与elementUI中给el-input绑定键盘按键--按键修饰符

vue怎么写键盘事件 vue允许将按键值作为修饰符来使用&#xff0c;如监听回车事件&#xff0c;有两种写法&#xff0c;如下代码&#xff1a; <input type"text" keyup.13"console.log($event)"></input><input type"text" keyup…
阅读更多...
很好的理解遗传算法的样例

很好的理解遗传算法的样例

遗传算法的手工模拟计算演示样例 为更好地理解遗传算法的运算过程&#xff0c;以下用手工计算来简单地模拟遗传算法的各 个主要运行步骤。 例&#xff1a;求下述二元函数的最大值&#xff1a; (1) 个体编码 遗传算法的运算对象是表示个体的符号串&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023