深入浅析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核心支持代码分享
May 23 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 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新手上路(二)
2006/10/09 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
javascript制作2048游戏
2015/03/30 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
python实现人机五子棋
2020/03/25 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
python实现学生管理系统开发
2020/07/24 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
高级销售员求职信
2013/10/25 职场文书
给同事的道歉信
2014/01/11 职场文书
毕业生求职信
2014/06/10 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android