vue-cli3.0配置及使用注意事项详解


Posted in Javascript onSeptember 05, 2018

这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下。

新建项目

# 安装
npm install -g @vue/cli
# 新建项目
vue create my-project
# 项目启动
npm run serve
# 打包
npm run build

打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。

功能配置

功能选择

vue-cli3.0配置及使用注意事项详解

3.0 版本包括默认预设配置 和 用户自定义配置,在用户自定义配置之后,会询问是否保存当前的配置功能为将来的项目配置的预设值,这样下次可直接使用不需要再次配置。

自定义功能配置包括以下功能:

1.TypeScript

2.Progressive Web App (PWA) Support

3.Router

4.Vuex

5.CSS Pre-processors

6.Linter / Formatter

7.Unit Testing

8.E2E Testing

可以根据项目大小和功能体验配置不同的功能,空格键 选中/反选,按a键 全选/全不选,按i键反选已选择项, 上下键 上下移动选择。

功能细节配置

vue-cli3.0配置及使用注意事项详解

在选择功能后,会询问更细节的配置,

TypeScript:

1.是否使用class风格的组件语法:Use class-style component syntax?

2.是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?

CSS Pre-processors:

1.选择CSS 预处理类型:Pick a CSS pre-processor

Linter / Formatter

1.选择Linter / Formatter规范类型:Pick a linter / formatter config

2.选择lint方式,保存时检查/提交时检查:Pick additional lint features

Testing

1.选择Unit测试方式

2.选择E2E测试方式

选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

vue.config.js 自定义配置

vue.config.js完整默认配置

module.exports = {
 // 基本路径
 baseUrl: '/',
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
 // 是否使用css分离插件 ExtractTextPlugin
 extract: true,
 // 开启 CSS source maps?
 sourceMap: false,
 // css预设器配置项
 loaderOptions: {},
 // 启用 CSS modules for all css / pre-processor files.
 modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
 open: process.platform === 'darwin',
 host: '0.0.0.0',
 port: 8080,
 https: false,
 hotOnly: false,
 proxy: null, // 设置代理
 before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
 // ...
 }
}

 设置代理

# string
module.exports = {
 devServer: {
 proxy: '<url>'
 }
}
# Object
module.exports = {
 devServer: {
 proxy: {
 '/api': {
 target: '<url>',
 ws: true,
 changeOrigin: true
 },
 '/foo': {
 target: '<other_url>'
 }
 }
 }
}

启用dll

启用dll后,我们的动态库文件每次打包生成的vendor的[chunkhash]值就会一样,其值可以是 true/false,也可以制定特定的代码库。

module.exports = {
 dll: true
}
module.exports = {
 dll: [
 'dep-a',
 'dep-b/some/nested/file.js'
 ]
}

静态资源路径

相对路径

1.静态资源路径以 @ 开头代表 <projectRoot>/src

2.静态资源路径以 ~ 开头,可以引入node modules内的资源

public文件夹里的静态资源引用

# 在 public/index.html中引用静态资源
<%= webpackConfig.output.publicPath %>
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow" >
# vue templates中,需要在data中定义baseUrl
<template>
 <img :src="`${baseUrl}my-image.png`">
</template>
<script>
 data () {
 return {
 baseUrl: process.env.BASE_URL
 }
 }
</script>

webpack配置修改

用 webpack-chain 修改webpack相关配置,强烈建议先熟悉webpack-chain和vue-cli 源码,以便更好地理解这个选项的配置项。

对模块处理配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
 config.module
 .rule('js')
 .include
  .add(/some-module-to-transpile/) // 要处理的模块
 }
}

修改webpack Loader配置 

// vue.config.js
module.exports = {
 chainWebpack: config => {
 config.module
 .rule('scss')
 .use('sass-loader')
 .tap(options =>
 merge(options, {
  includePaths: [path.resolve(dirname, 'node_modules')],
 })
 )
 }
}

修改webpack Plugin配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
 config
 .plugin('html')
 .tap(args => {
 return [/* new args to pass to html-webpack-plugin's constructor */]
 })
 }
}

eg: 在本次项目较小,只对uglifyjs进行了少量的修改,后期如果还有配置上优化会继续添加。

chainWebpack: config => {
 if (process.env.NODE_ENV === 'production') { 
 config
  .plugin('uglify')
  .tap(([options]) =>{
  // 去除 console.log
  return [Object.assign(options, {
   uglifyOptions: { compress: {
   drop_console : true,
   pure_funcs: ['console.log']
   }}
  })]
  })
 }
}

全局变量的设置

在项目根目录创建以下项目:

.env        # 在所有环节中执行

.env.local     # 在所有环境中执行,git会ignored

.env.[mode]     # 只在特定环境执行( [mode] 可以是 "development", "production" or "test" )

.env.[mode].local  # 在特定环境执行, git会ignored

.env.development  # 只在生产环境执行

.env.production   # 只在开发环境执行

在文件里配置键值对:

# 键名须以VUE_APP开头
VUE_APP_SECRET=secret

在项目中访问:

console.log(process.env.VUE_APP_SECRET)

这样项目中的 process.env.VUE_APP_SECRET 就会被 secret 所替代。

vue-cli 3 就项目性能而言已经相当友好了,私有制定性也特别强,各种配置也特别贴心,可以根据项目大小和特性制定私有预设,对前期项目搭建而言效率极大提升了。

Javascript 相关文章推荐
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
js清理Word格式示例代码
Feb 13 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 #Javascript
vue实现点击选中,其他的不选中方法
Sep 05 #Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 #Javascript
Node.js 使用request模块下载文件的实例
Sep 05 #Javascript
详解Angular6学习笔记之主从组件
Sep 05 #Javascript
webpack4 入门最简单的例子介绍
Sep 05 #Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
详解vscode中vue代码颜色插件
2018/10/11 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
详细解读Python中的__init__()方法
2015/05/02 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python lxml模块安装教程
2015/06/02 Python
Python简明入门教程
2015/08/04 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python flask实现分页的示例代码
2018/08/02 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
庆元旦迎新年广播稿
2014/02/18 职场文书
跳蚤市场口号
2014/06/13 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
四查四看整改措施
2014/09/19 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书