揭秘vue-cli3全面配置
- 更新时间:2020-03-11 16:43:29
- 编辑:满蝾婷
本文介绍了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: './', // 默认'/',部署应用包时的基本 URL outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录 assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录 lintOnSave: false, runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本 productionSourceMap: false, // 生产环境的 source map parallel: 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: true } } } }
修复HMR(热更新)失效
module.exports = { chainWebpack: config => { // 修复HMR config.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
在babel.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-plugin
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.VUE_APP_SRC;挂载环境变量中的配置信息,然后在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';
配置babel.config.js
const plugins = []; module.exports = { presets: [["@vue/app",{"useBuiltIns": "entry"}]], plugins: plugins };
完整配置
安装依赖
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" }
babel.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: './', // 默认'/',部署应用包时的基本 URL outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录 assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录 lintOnSave: false, runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本 productionSourceMap: false, // 生产环境的 source map configureWebpack: 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 => { // 修复HMR config.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' /
相关教程
-
Vue-cli3.x + axios 跨域方案踩坑指北
这篇文章主要介绍了Vue-cli3.x + axios 跨域方案踩坑指北,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
发布时间:2019-09-10
-
详解vue-cli3多页应用改造
这篇文章主要介绍了详解vue-cli3多页应用改造,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2019-07-24
-
Spring Boot+Vue全栈开发实战
传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序
大小:196.3 MBSpring电子书
-
JavaScript+Vue+React全程实例
这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。
大小:59150 MB MJS实例
-
Vue.js实战
尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅
大小:196.7 MBVue电子书
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。
大小:26581 MB MVue.js入门
-
前端工程师必备技能:Vue移动开发实战技巧
Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201
大小:122 MBVue实战电子书
-
Vue.js项目实战
Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英
大小:141 MBVue
-
水晶石技法VUE 10完全学习手册
《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见
大小:114191 MB VUE10学习手册
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。
大小:186.6 MBWeb前端电子书
-
Vue.js前端开发:快速入门与专业应用
本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的
大小:3.6KB MB前端开发电子书