深入浅析vue-cli@3.0 使用及配置说明


Posted in Javascript onMay 08, 2019

使用vue-cli3已经有相当一段时间了,一直没怎么去注意其中的配置,所以趁着这段时间总结下应用过程中的一些经验,本文是从安装到开发使用的一个过程讲解,也可以说是新手向的文章,文字有点多,请耐心观看。

(一)安装:

1、下载安装node: 登陆node官网并选择自己合适的node版本进行安装;

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

npm install -g @vue/cli
# OR
# 推荐使用
npm install -g yarn # 如果已有安装,此步骤不需要
yarn global add @vue/cli

(二)创建一个项目:

vue create my-project
# OR
vue ui

选择合适的配置
# 版本信息
Vue CLI v3.7.0 
? Please pick a preset:
# 基础配置
 vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha)
 default (babel, eslint)
# 自定义配置,这里我们选择自定义选项,点击回车
> Manually select features

选择需要的插件及编译工具

? Check the features needed for your project:
# 代码转换,可以让你更好的书写前沿技术
 (*) Babel
# JavaScript 的一个超集,好东西用起来
 (*) TypeScript
# PWA支持,不要求使用可以不选
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
# css预编译器
 (*) CSS Pre-processors
# 代码格式化
 (*) Linter / Formatter
# 书写单元测试用的,不要求使用可以不选
>(*) Unit Testing
 ( ) E2E Testing

接下来的配置选项

# 是否使用class风格进行组件开发
? Use class-style component syntax? Yes
# 使用 babel 对 TypeScript 代码进行编译转换
? Use Babel alongside TypeScript for auto-detected polyfills? Yes

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# 选择css预编译,这里我们选择Sass/SCSS
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
# 选择代码格式化配置
? Pick a linter / formatter config: Standard
# 代码检查方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
# 选择单元测试工具
? Pick a unit testing solution: Mocha
# 是否将配置放在单独的文件中
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
# 是否将此次配置保存
? Save this as a preset for future projects? No

最后

cd my-project
npm run install
npm run serve
# OR 推荐使用
yarn install
yarn serve

(三)目录结构

深入浅析vue-cli@3.0 使用及配置说明

(四)环境变量配置

环境变量说明

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[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 ,并在 scripts 里面添加如下代码

"serve:test": "vue-cli-service serve --mode development.test",

(五)添加配置文件 vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

// vue.config.js
module.exports = {
 // baseUrl从 Vue CLI 3.3 起已弃用,请使用publicPath。
 // baseUrl:'./', 
 // 配置sub-path后访问路径为https://xxx-path/sub-path/#/
 publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/',
 // 输出文件路径,默认为dist
 outputDir: 'dist', 
 // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
 assetsDir: '', 
 // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
 indexPath: '',
 // 配置多页应用
 pages: {
 index: {
  // page 的入口
  entry: 'src/index/main.js',
  // 模板来源
  template: 'public/index.html',
  // 在 dist/index.html 的输出
  filename: 'index.html',
  // 当使用 title 选项时,
  // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  title: 'Index Page',
  // 在这个页面中包含的块,默认情况下会包含
  // 提取出来的通用 chunk 和 vendor chunk。
  chunks: ['chunk-vendors', 'chunk-common', 'index']
 },
 // 当使用只有入口的字符串格式时,
 // 模板会被推导为 `public/subpage.html`
 // 并且如果找不到的话,就回退到 `public/index.html`。
 // 输出文件名会被推导为 `subpage.html`。
 subpage: 'src/subpage/main.js',
 },
 lintOnSave: true, // 保存时 lint 代码
 // css相关配置
 css: {
 // 是否使用css分离插件 ExtractTextPlugin
 extract: true,
 // 开启 CSS source maps?
 sourceMap: false,
 // css预设器配置项
 loaderOptions: {
  // pass options to sass-loader
  sass: {
  // 自动注入全局变量样式
  data: `
   @import "src/你的全局scss文件路径";
  `
  }
 },
 // 启用 CSS modules for all css / pre-processor files.
 modules: false,
 },
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: false,
 //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
 parallel: require('os').cpus().length > 1,
 // 所有 webpack-dev-server 的选项都支持
 devServer: {
 port: 8080, // 配置端口
 open: true, // 自动开启浏览器
 compress: true, // 开启压缩
 // 设置让浏览器 overlay 同时显示警告和错误
 overlay: {
  warnings: true,
  errors: true
 },
 // 设置请求代理
 proxy: {
  '/api': {
  target: '<url>',
  ws: true,
  changeOrigin: true
  },
  '/foo': {
  target: '<other_url>'
  }
 }
 },
}

(六)修改 webpack 配置信息

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

// 安装 babel-polyfill
// npm install babel-polyfill 或者 yarn add babel-polyfill
// 安装 uglifyjs-webpack-plugin
// npm install uglifyjs-webpack-plugin -D 或者 yarn add uglifyjs-webpack-plugin -D
// vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
 chainWebpack: config => {
 // 引入babel-polyfill
 config
  .entry('index')
  .add('babel-polyfill')
  .end();
 // 添加文件路径别名
 config.resolve.alias.set("@", resolve("src"));
 if (isProduction) {
  // 生产环境注入cdn
  config.plugin('html')
  .tap(args => {
   args[0].cdn = cdn;
   return args;
  });
 }
 },
 configureWebpack: config => {
 if (isProduction) {
  // 为生产环境修改配置...
  config.plugins.push(
  //添加代码压缩工具,及设置生产环境自动删除console
  new UglifyJsPlugin({
   uglifyOptions: {
   compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true,
   },
   },
   sourceMap: false,
   parallel: true,
  })
  );
 } else {
  // 为开发环境修改配置...
 }
 },
}

分离第三方插件,引入cdn配置

这里介绍一个开源的cdn库www.bootcdn.cn/

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
 css: [],
 js: [
 'https://xxx-cdn-path/vue.runtime.min.js',
 'https://xxx-cdn-path/vue-router.min.js',
 'https://xxx-cdn-path/vuex.min.js',
 'https://xxx-cdn-path/axios.min.js',
 ]
}

module.exports = {
 configureWebpack: config => {
 if (isProduction) {
  // 用cdn方式引入,分离第三方插件
  config.externals = {
  'vue': 'Vue',
  'vuex': 'Vuex',
  'vue-router': 'VueRouter',
  'axios': 'axios'
  }
 } else {
  // 为开发环境修改配置...
 }
 },
}

修改html文件

<!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/favicon.ico" type="image/x-icon" />
 <link rel="shortcut icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
 <title>my-project</title>
 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
 <% } %>
 <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
 <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
 <% } %>
</head>
<body>
 <noscript>
 <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
 <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 <% } %>
</body>
</html>

(七)关于打包后请求数的优化点Preload and Prefetch

首先我们看一张图

深入浅析vue-cli@3.0 使用及配置说明

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

查看官方文档,可以得知:

<link rel="preload"> 是一种 resource hint,用来指定页面加载后很快会被用到的资源,所以在页面加载的过程中,我们希望在浏览器开始主体渲染之前尽早 preload。

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

这些提示会被 @vue/preload-webpack-plugin 注入,并且可以通过 chainWebpack 的 config.plugin('preload') 进行修改和删除。

<link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。

默认情况下,一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。

这些提示会被 @vue/preload-webpack-plugin 注入,并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。

所以修改 vue.config.js 文件

// vue.config.js
module.exports = {
 chainWebpack: config => {
 // 移除 prefetch 插件
 config.plugins.delete('preload');
 config.plugins.delete('prefetch');
 }
}

(八)总结

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

以上所述是小编给大家介绍的vue-cli@3.0 使用及配置说明,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
js调试系列 初识控制台
Jun 18 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
js实现继承的方法及优缺点总结
May 08 #Javascript
微信小程序人脸识别功能代码实例
May 07 #Javascript
iphone刘海屏页面适配方法
May 07 #Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 #Javascript
JavaScript实现随机点名器实例详解
May 07 #Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 #Javascript
微信小程序:数据存储、传值、取值详解
May 07 #Javascript
You might like
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
限制复选框的最大可选数
2006/07/01 Javascript
一个JS翻页效果
2007/07/23 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python functools模块学习总结
2015/05/09 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
小学教师师德师风演讲稿
2014/08/22 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
初中数学教学随笔
2015/08/15 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Java数组详细介绍及相关工具类
2022/04/14 Java/Android