vue-cli3.0的简单配置

从去年九月份开始，就一直有人在公众号上面叫嚣 vue3.0将要来临了 ，为了适应前端潮流的开发，我都花了一段时间去研究了一段时间的vue3.0源码，也算小有所成吧，有时间还是希望与大家分享的，现在呢？主要记录一下，今天研究vue3.0的项目配置文件的成果。

一、 安装

首先注意一下：Vue Cli要求Node.js版本8或更高，也可以在同一台计算机上管理多个版本的Node。

npm install -g @vue/cli
# or
yarn global add @vue/cli
复制代码

检查安装

vue --version
复制代码

二、 创建项目

vue create 
复制代码

确认。默认模式我就不做赘述了，我这里主要谈一下自定义模式吧。

全选

然后就是这些插件的一些功能配置： 1、 ts里面两个，是否使用class风格的组件语法和是否使用babel做转义，我都选择yes。因为vue3.0是用重构过的，想了解一下，当然不想使用ts的直接可以拒绝掉 2、 router是否使用history模式，我选择no 3、 css预语言我习惯使用stylus 4、 代码格式化检测选择，eslint的话我选择在保存的时候去检测错误 5、 是否保存刚才的配置，下一次就不用重新配置了，我就直接回车 6、关于Babel, PostCSS, ESLint, etc.这些配置文件你是想放在package.json里面还是单独放在外面 编辑器一般默认会在项目根目录下寻找配置文件，这里我就直接回车选择In dedicated config files 7、是否保存为未来项目的预配置吗，这个直接省过了。

最后具体的配置如下：

具体的项目结构图如下：

三、 项目配置

3.1、 配置vue.config.js

在vue2.0的时候，经常会在配置文件中配置一下选择项，但是我们发现在vue3.0里面所谓的配置项直接被加载到包目录下面去了。最后查阅官方文档说，可以在根目录新建一个 vue.config.js 文件，该文件会被@vue/cli-service 自动加载。

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: true,
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 设置代理
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}
复制代码

上面是配置文件的全部内容了，大概的意思也做了简单的描述。我也将我项目里面的配置拉出来谈一下。

const _config = require('./config')
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: _config.getOutPutPath(),
  outputDir: 'dist',
  assetsDir: 'assets',
  lintOnSave: false,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('layout', resolve('src/views'))
      .set('utils', resolve('src/utils'))
  },
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8088,
    https: false,
    hotOnly: false
  }
}
复制代码

我在上面主要是： 1、 自定义了alias名称 2、 重新定制了一下publicPath 3、 关闭了eslint保存时检查的功能。 4、 host设置成0.0.0.0，允许内网访问。

3.2、 配置多个环境

在vue2.0的时候，我一共给组内开发者配置了三个环境，分别是： 1、 本地测试环境 2、 生产测试环境 3、 生产正式环境 我在vue3.0同样也找到了相同的配置

如上图所示，我分别新建了三个.env.*文件，里面的内容分别都是不同环境下面的特有的属性，例如.env.local:

NODE_ENV="local"
VUE_APP_TEST="test"
复制代码

这里值得注意的是，除了NODE_ENV和BASE_URL之外，其他自定义属性都必须加上VUE_APP的头缀 然后在 package.json 中就可以做简单的配置

"dev": "vue-cli-service serve --mode local",
    "lint": "vue-cli-service lint",
    "debug": "vue-cli-service build --mode development",
    "build": "vue-cli-service build --mode production"
复制代码

最后我把所有的命令都列举出来，以供以后查阅

serve:vue-cli-service serve

  --open    在服务器启动时打开浏览器

  --copy    在服务器启动时将 URL 复制到剪切版

  --mode    指定环境模式 (默认值：development)

  --host    指定 host (默认值：0.0.0.0)

  --port    指定 port (默认值：8080)

  --https   使用 https (默认值：false)


build:vue-cli-service build

  --modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

  --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

  --report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小
复制代码

3.3、 注意

当Node更新到11之后，可能会报包找不到，需要手动引入。

四、 其他功能

4.1、 browserslist

根目录中多了一个.browserslist文件，可以指定项目的目标浏览器的范围 用于转译的 JavaScript 特性和添加CSS 浏览器前缀，可以减少兼容代码提高代码质量 如果想少一个文件，你也可以在package.json中添加browserslist字段，参数是一个数组

默认配置是这样的

> 1%
last 2 versions
not ie <= 8
复制代码

4.2、 现代模式

为了兼容那些不支持js新特性的浏览器我们需要Babel转译，但转译后的代码笨重冗长，这次3.x提供了一个现代模式

vue-cli-service build --modern
复制代码

Vue CLI 会产生两个应用的版本：一个现代版的包，面向支持ES modules的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。 最酷的是这里没有特殊的部署要求。其生成的 HTML 文件会自动使用  Phillip Walton 精彩的博文 中讨论到的技术：

• 现代版的包会通过 <script type="module"> 在被支持的浏览器中加载；它们还会使用  <link rel="modulepreload"> 进行预加载。

• 旧版的包会通过 <script nomodule> 加载，并会被支持 ES modules 的浏览器忽略。

• 一个针对 Safari 10 中 <script nomodule> 的修复会被自动注入。

对于一个 Hello World 应用来说，现代版的包已经小了 16%。在生产环境下，现代版的包通常都会表现出显著的解析速度和运算速度，从而改善应用的加载性能

4.3、 插件安装

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件 对于这种cli插件需要加入@vue的前缀，这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器

插件添加
vue add @vue/eslint

向被安装的插件传递生成器选项 (这样做会跳过命令提示)
vue add @vue/eslint --config airbnb --lintOn save
复制代码

4.4、 快速开发

在vue3.0里面支持对单个文件进行开素原型开发，当然首先还是得引入一个库文件

npm install -g @vue/cli-service-global
复制代码

vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,但是缺点是需要安装全局依赖，这会使得在不同机器上的不一致性得不到保证。

• vue serve

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器


Options:

  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息
复制代码

你只需要一个vue文件，然后在文件所在的目录下面运行即可。

vue serve xxx.vue
复制代码

• vue build

Usage: build [options] [entry]

在生产环境模式下零配置构建一个 .js 或 .vue 文件


Options:

  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息
复制代码

同样你也可以使用

vue build xxx.vue
复制代码

对目标文件进行编译部署

4.5、 拉取2.x模版

因为刚开始学习3.0，很可能遇到一个问题 就是想继续使用2.x的项目模版，此时我们需要重新导入

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
复制代码

说在最后

vue3.0其实还有很多方面的东西可以来写，这篇文章希望能够从当作一本敲门砖来逐渐开始总结最近一段时间我对vue3.0探究的结果。