当前位置:首页 >> 网络编程

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

这次给大家带来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"color: #ff0000">vue.config.js 自定义配置

vue.config.js完整默认配置

module.exports = {
 // 基本路径
 baseUrl: '/',
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler"htmlcode">
# 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="/UploadFiles/2021-04-02/`${baseUrl}my-image.png`">

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