深入浅析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 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Vue生命周期示例详解
Apr 12 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python新手实现2048小游戏
2015/03/31 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python如何测试stdout输出
2020/08/10 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
物理系毕业生自荐信
2013/11/01 职场文书
合作意向书范本
2014/03/31 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技