Vue Cli3 项目配置

一、新建项目

使用 vue-cli3 构建一个初始的Vue项目：Cli3 官方文档

以下配置是我在项目中常用的，大家可自己斟酌是否需要使用！

1、环境变量

主要用于区分 开发、测试、正式环境的
(1) 在根目录新建三个文件：.env.dev .env.test .env.prod
(2) .env.dev写入

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'test'

(3) .env.test写入

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'

(4) .env.prod写入

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'

(5) 修改package.json的script

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

修改为

"scripts": {
    "serve": "vue-cli-service serve --mode dev", // 本地运行
    "btest": "vue-cli-service build --mode test", // 测试环境打包
    "build": "vue-cli-service build --mode prod", // 正式环境打包
    "lint": "vue-cli-service lint"
}

(5) 在main.js写入

// 是否为测试环境
Vue.prototype.$istest = process.env.VUE_APP_CURRENTMODE === 'test'

console.log('当前NODE_ENV：' + process.env.NODE_ENV)
console.log('当前VUE_APP_CURRENTMODE：' + process.env.VUE_APP_CURRENTMODE)
console.log('是否为测试环境：' + Vue.prototype.$istest)

(6) 重启npm run serve，这里就不要使用vue ui启动项目了，反正我通过它启动后，无法获取process.env.VUE_APP_CURRENTMODE的值，只能通过命令行运行npm run serve启动
控制台打印结果：

image.png

 

2、别名设置

(1) 在vue.config.js 顶部新增

// path依赖
const path = require('path')

// 查找文件方法
const resolve = dir => {
    return path.