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

4,146 阅读5分钟

前言

由于之前的项目中都是用的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. 加个好友, 虽然帮不上你大忙,但是一些业务问题大家可以探讨交流。