Vue CLI3.x 配置指南「初识Vue CLI3.x 版本」

前言

因为以前的项目中都是用的vue-cli 2.x 版本，最近新开的项目使用了vue-cli 3.x 版本的脚手架，所以总结一下笔记，方便之后查看使用。

关于旧版本

Vue CLI 的包名称由 vue-cli 改为了 @vue/cli。 若是你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你须要先经过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 须要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装

可使用下列任一命令安装这个新的包：

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

安装以后，你就能够在命令行中访问 vue 命令。你能够经过简单运行 vue，看看是否展现出了一份全部可用命令的帮助信息，来验证它是否安装成功。

你还能够用这个命令来检查其版本是否正确：

vue --version
复制代码

建立项目

当你安装vue-cli 3.x版本之后，在使用之前2.x版本的命令安装已经不成功了，须要按照如下方式

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆盖了。若是你仍然须要使用旧版本的 vue init 功能，你能够全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
<!--经过如下命令建立项目-->
vue init webpack myApp
复制代码

建立 3.x 模版 (新版本)

运行如下命令来建立一个新项目：

vue create hello-world
复制代码

你会被提示选取一个 preset。你能够选默认的包含了基本的 Babel + ESLint 设置的 preset，也能够选“手动选择特性”来选取须要的特性。

经过方向键选择特性，空格确认插件，回车确认完成选项 ===> 这里我选择了手动配置(Manually)

添加了Babel和Vuex和Router还有CSS Pre-processors插件

接下来会让你选择router的模式，默认回车

接下来会让你选择CSS Pre-processors的格式，这里选择了Sass/SCSS (with node-sass)

最后咱们选择配置文件格式为package.json，而后保存配置便可完成。

项目结构如图：

配置参考

vue.config.js

vue.config.js 是一个可选的配置文件，若是项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可使用 package.json 中的 vue 字段，可是注意这种写法须要你严格遵守 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
}
复制代码

以上内容都是vuecli官方文档有的。你们也能够直接去看官网文档，接下来我将记录本身项目中的一些配置。

// vue.config.js
module.exports = {

  <!--全部的资源都会被连接为相对路径, 此属性至关于2.x中的 assetsPublicPath-->
  publicPath: './',
  
  <!--生产环境构建文件的目录-->
  outputDir: 'dist', 
  
  <!--放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。-->
  assetsDir: 'static', 

  <!--是否在开发环境下经过 eslint-loader 在每次保存时 lint 代码。-->
  <!--这个值会在 @vue/cli-plugin-eslint 被安装以后生效。-->
  lintOnSave: process.env.NODE_ENV === 'development',
  
  <!--若是你不须要生产环境的 source map，能够将其设置为 false 以加速生产环境构建。-->
  productionSourceMap: false, 
  
  <!--全部 webpack-dev-server 的选项-->
  devServer:{
    <!--端口号-->
    port: process.env.port || 9527,
    
    <!--dev-server在服务器启动后打开默认浏览器-->
    open: true，
    
    <!--出现编译器错误或警告时，在浏览器中显示全屏覆盖。-->
    overlay: {
      <!--不显示警告-->
      warnings: false,
      
      <!--显示错误-->
      errors: true
    },
    
    <!--若是你的前端应用和后端 API 服务器没有运行在同一个主机上，
    你须要在开发环境下将 API 请求代理到 API 服务器。-->
    proxy: {
      '/api': {
        target: 'http:www.baidu.com', // 要代理的API地址
        changeOrigin: true, // 容许跨域
        pathRewrite: {
            <!--这里理解成用'/api'代替target里面的地址，后面组件中咱们掉接口时直接用api代替--> 
            <!--好比我要调用'http://www.abc.com/user/add'，直接写'/api/user/add'便可'--> '^/api' : '' } }, '/foo': { target: '<other_url>' ...... } } }, configureWebpack: { name: name, resolve: { <!--设置别名--> alias: { '@': resolve('src') } } } } 复制代码

以上就是部分配置内容，很简单基本看文档就能看懂。

配置环境变量

在3.x版本中，咱们直接在根目录下新建.env.development与.env.production还有.env.test文件用来设置不一样环境下的某些变量的不一样属性。例如：

• 本地环境也就是开发环境

• 生产环境

• 测试测试

一般咱们会在封装axios中去设置baseUrl地址，这样就能够根据不一样环境去调用不一样的api地址

最后在打包的时候添加一下环境变量，以此来选择打包出的文件是什么环境下的

结尾

关于Vue CLI3.x版本的不少配置文档都说明的很清楚，但实际上本身用起来发现会看不会写，我会在项目中逐渐将用到的一些配置都写成笔记，方便你我之后查看。

❤️ 看完帮个忙

若是你以为这篇内容对你挺有启发，我想邀请你帮我个小忙：

1. 点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）

2. 关注公众号「番茄学前端」，我会定时更新和发布前端相关信息和项目案例经验供你参考。

3. 加个好友， 虽然帮不上你大忙，可是一些业务问题你们能够探讨交流。