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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
alert和confirm功能介绍
May 21 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
Javascript进制转换实例分析
May 14 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python可视化实现KNN算法
2019/10/16 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
如何写python的配置文件
2020/06/07 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
类如何去实现接口
2013/12/19 面试题
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
开学寄语大全
2014/04/08 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
排球赛新闻稿
2015/07/17 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
Redis基本数据类型Set常用操作命令
2022/06/01 Redis