我们使用vue-cli3已经有一段时间了，但是对它的配置并没有太多的关注，所以趁着这个时间总结一下应用过程中的一些经验。本文是一个从安装到开发使用的过程，也可以说是一篇新手文章。话很多，请耐心等待。

安装：

1.下载安装node:登录节点官网，选择合适版本的节点进行安装；

2.安装vue-cli脚手架工具

Npm install -g @vue/cli# OR#建议使用Npm install -g纱线#。如果已经安装，此步骤不需要纱线全局add @vue/cli。(2)创建项目：

Vue创建我的项目# ORvue ui选择合适的配置#版本信息Vue CLI v3.7.0？请选择一个preset:#基本配置vue-cli3-demo (vue-router、vuex、sass、babel、typescript、unit-mocha)默认(babel、eslint) #自定义配置，这里我们选择自定义选项，点击回车手动选择功能选择需要的插件和编译工具

？检查您的项目所需的功能： #代码转换可以使您编写尖端技术的超集(*) Babel# JavaScript，并使用好东西(*) TypeScript# PWA支持。如果不选择()渐进式网络应用程序(PWA)支持(*)路由器(*) vuex # CSS预编译器(*) CSS预处理器#代码格式化(*)交织器/格式化器#，则不需要编写单元测试，也不需要选择(*)单元测试()E2E测试下一个配置选项

#组件开发使用类风格吗？使用类样式的组件语法？是#用babel编译和转换TypeScript代码？将巴别塔与TypeScript一起用于自动检测聚合填充？什么事？路由器使用历史模式？(需要正确的服务器设置以便在生产中进行索引回退)是#选择css预编译，这里我们选择Sass/SCSS？选择CSS前置处理器(默认支持后置CSS、autoprefixer和CSS模块): sass/SCS(带node-sass) #选择代码格式化配置？检查pick a l inter/formatter config :标准#的代码。选择附加lint功能：(按空格键选择，a切换全部，I反转选择)保存#上的lint选择单元测试工具？选择单元测试解决方案：摩卡#是否要将配置放在单独的文件中？你更喜欢把巴别尔、波斯特、埃斯林等的配置放在哪里？在专用配置文件#中，是否要保存此配置？是否将其保存为未来项目的预设？没有最后一个

光盘我的项目NPM运行安装NPM运行服务#或建议使用纱安装纱服务的目录结构(三)

(4)环境变量的配置

环境变量描述。env #在所有环境中加载。env.local #在所有环境中加载，但被git忽略。环境。[mode] #仅在指定模式下加载。环境。[模式]。local #仅在指定模式下加载，但被git忽略

新的环境变量。env.development.text用于测试环境并添加以下代码

node _ env=' development ' VUE _ APP _ URL='您的测试环境域名'。只有以vue _ app _开头的变量才会被webpack.DefinePlugin静态嵌入到客户端的包中。您可以在应用程序代码中这样访问它们：

console . log(process . env . vue _ APP _ URL)

修改package.json并在脚本中添加以下代码

serve : test ' : ' vue-CLI-service service-mode development . test '，

(5)添加配置文件

Vue.config.js是一个可选的配置文件，如果它存在于项目的根目录中(与package.json处于同一级别)，它将由@vue/cli-service自动加载。您也可以在package.json中使用vue字段，但是请注意，这种编写方法要求您严格遵循json格式。

//vue。配置。js模块。导出={//BaseURl从Vue CLI 3.3起已弃用，请使用publicPath。//基本网址： ' ./', //配置子路径后访问路径为https://XXX-路径/子路径/#/公共路径：进程。ENV。node _ ENV===' production '？/子路径/' : '/',//输出文件路径，默认为dist outputDir: 'dist '，//放置生成的静态资源(js、css、img ),字体)的（相对于输出目录的)目录assetsDir: ' '，//指定生成的index.html的输出路径（相对于输出目录).也可以是一个绝对路径indexPath: ' '，//配置多页应用第：页{ index: { //页的入口entry: 'src/index/main.js '，//模板来源模板： '公共/索引。html '，//在dist/index.html的输出filename: 'index.html '，//当使用标题选项时，//模板中的标题标签需要是title %=html webpackkplugin。选项。标题%/标题标题： '索引页'，//在这个页面中包含的块，默认情况下会包含//提取出来的通用矮胖的人或物和供应商区块. chunk 3360['区块供应商','区块通用','索引'] },//当使用只有入口的字符串格式时， //模板会被推导为`公共/子页。html` //并且如果找不到的话，就回退到“public/index.html”。//输出文件名会被推导为`子页。html `。子页： ' src/子页/main.js '，}，lintOnSave: true，//保存时线头代码//css相关配置css: { //是否使用钢性铸铁分离插件ExtractTextPlugin extract: true，//开启半铸钢钢性铸铁(Cast Semi-Steel)源图？sourceMap: false，//css预设器配置项loader options : {//将选项传递给sass-loader sass: { //自动注入全局变量样式data: ` @import 'src/你的全局半导体色敏传感器文件路径；` } }, //启用所有css /预处理器文件的半铸钢钢性铸铁(Cast Semi-Steel)模块modules: false，}，//生产环境是否生成sourceMap文件productionSourceMap: false，//是否为巴比伦式的城市或以打字打的文件使用线程加载器。该选项在系统的中央处理器有多于一个内核时自动启用，仅作用于生产构建并行：需要(“os”).中央处理器().长度1,//所有网络包-开发-服务器的选项都支持devServer: { port:8080/}配置端口open: true，//自动开启浏览器compress: true，//开启压缩//设置让浏览器覆盖物同时显示警告和错误重叠： {警告：为真，错误：为真},//设置请求代理代理： { '/API ' : {目标： ' URL '，ws: true，changeOrigin: true }，'/foo ' : {目标： ' other _ URL ' } } }，}(六)修改工具配置信息

vue-cli3.0的版本已经将工具的配置整合进vue.config.js里面了

//安装babel-poly ill//NPM安装巴贝尔-波利希尔或者纱线添加babel-polyfill/安装uglifyjs-webpack-plugin//npm安装uglifyjs-网络包-插件-D或者纱线添加uglifyjs-web pack-plugin-D//vue。配置。jsconst UglifyJsPlugin=require(' uglifyjs-web pack-plugin ')；const是生产=过程。ENV。NODE _ ENV===' production模块。导出={ chainwebpack k : config={//引入巴贝尔-多菲尔配置。条目('索引')。添加('巴别塔-波利伊尔').end()；//添加文件路径别名config.resolve.alias.set('@ '，resolve(' src '))；if (isProduction) { //生产环境注入cdn config.plugin('html ').tap(args={ args[0]).cdn=cdn返回参数；});} }，configurewebpack k : config={ if(正在生产){//为生产环境修改配置.config.plugins.push(//添加代码压缩工具，及设置生产环境自动删除控制台新UglifyJsPlugin({ uglifyooptions 3360 { compression : { warning : false，drop_debugger: true，drop_console: true，}，}，sourceMap: false，parallel: true，})；} else { //为开发环境修改配置.} },}

分离第三方插件，引入内容交付网络配置

这里介绍一个开源的内容交付网络库www.bootcdn.cn/

//vue。配置。jsconst是生产=过程。ENV。NODE _ ENV===' productionconst cdn={ css: []，js :[' https://XXX-cdn-path/vue。运行时。量滴js '，' https://XXX-cdn-path/vue-router。量滴js '，' https://xxx-cdn-path/vuex.min.js '，' https://xxx-cdn-path/axios.min.js '，]}模块。导出={ configurewebpack k 3360 config={ 0用内容交付网络方式引入，分离第三方插件配置。externals={ ' Vue ' : ' Vue '，' vuex': 'Vuex '，' vue-router': 'VueRouter '，' axios': 'axios' } } else { //为开发环境修改配置.} },}

修改超文本标记语言文件

！DOCTYPE html html lang=' zh ' head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' link rel=' icon ' href=' %=BASE _ URL % static/fav icon。ico ' type=' image/X-icon '/link rel='快捷图标href=' %=BASE _ URL % static/fav图标。ico ' type-使用加拿大的半铸钢钢性铸铁(铸造半钢)文件-%用于(HTMlWebPackplugin中的var I)。选项。cdn HTMlWebPackplugin。选项。cdn。CSS){ % link href=' %=HTMlWebPackLugin。选项。cdn。CSS[I]% ' rel=' preload ' as=' style ' link href=' %=HTMlWebPackplugin。选项。cdn。CSS[I]% ' rel='样式表' % } %!-使用加拿大的射流研究…文件-%用于(HTMlWebPackplugin中的var I)。选项。cdn HTMlWebPackplugin。选项。cdn。js){ % link href=' %=HTMlWebPackLugin。选项。cdn。js[I]% ' rel=' preload ' as=' script ' % } %/head dy no script strong很抱歉，没有启用JavaScript，眼睛管理无法正常工作。请让它继续/strong/no script div id=' app '/div！内置文件将被自动注入-%用于(html webpackplugin。选项。cdn html webpackplugin。选项。cdn。射流研究…中的var I){ % script src=' http :%=HTMlWebPakplugin。选项。cdn。js[I]% '/script % } %/body/html(七)关于打包后请求数的优化点预加载和预取

首先我们看一张图

从图中我们可以看出首次加载的资源非常多，有217个请求，为什么会这样呢？

查看官方文档，可以得知：

链接rel='预加载'是一种资源提示，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早预载。

默认情况下，一个Vue CLI应用会为所有初始化渲染需要的文件自动生成事先装好提示。

这些提示会被@ vue/preload-web pack-插件注入，并且可以通过chainWebpack的' config.plugin('预加载)进行修改和删除。

链接rel="预取"是一种资源提示，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

默认情况下，一个Vue CLI应用会为所有作为异步块生成的Java脚本语言文件（通过动态导入()按需代码拆分的产物)自动生成预取提示。

这些提示会被@ vue/preload-web pack-插件注入，并且可以通过chainWebpack的config.plugin("预取")进行修改和删除。

所以修改vue.config.js文件

//vue。配置。js模块。导出={ chainwebpack : config={//移除预取插件配置。插件。删除('预载')；' config.plugins.delete('预取');}}(八)总结

vue-cli3在项目配置上精简了很多，而且它也提供了很多配置选项，满足定制化需要。各种配置也特别贴心，可以按照自己项目的需要进行自定义修改，大大减少了提升了开发的工作效率。

以上所述是小编给大家介绍的[电子邮件保护]使用及配置说明，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！