从去年九月份开始，就一直有人在公众号上面叫嚣 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 
复制代码

这里有两个模式，第一个是使用默认的模式，另一个是自定义模式，利用键盘 上下 控制操作， enter 确认。默认模式我就不做赘述了，我这里主要谈一下自定义模式吧。

这里主要用来手动选择项目中应该导入的插件、库。这里主要用键盘 上下 移动光标，键盘 enter 选择,键盘 space 选择单项,键盘 i 控制反选和 a 全选

然后就是这些插件的一些功能配置： 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%	全球超过1%人使用的浏览器
> 5% in US	使用美国使用情况统计，接受两个字母的 国家/地区代码
> 5% in my stats	使用 自定义使用数据
last 2 versions	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR	火狐最新版本
Firefox > 20	指定版本范围
not ie <=8	方向排除部分版本
Firefox 12.1	指定浏览器版本
since 2013	2013年之后发布的所有版本

默认配置是这样的

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