深入浅析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 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
js中作用域的实例解析
Mar 16 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
如何利用node转发请求详解
Sep 17 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
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python中bytes和str类型的区别
2019/10/21 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
应届生法律求职信
2013/10/22 职场文书
营业经理岗位职责
2013/11/10 职场文书
委托书范文
2014/04/02 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python