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+)。
重新安装最新版本vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue-cli3配置指南
其中vue.config.js配置参考
接下来创建项目:
-
vue create app //app是项目名
,如下图所示,这里使用默认配置
-
npm run serve //运行项目
这里也可以使用
vue ui
使用图形化界面进行创建应用,具体用法不做赘述
项目结构:
这里的dist、env.dev、env.prd、env.uat、vue.config.js 环境变量和模式等所需要的文件。后面一一说道
项目中,分为开发环境和生产环境,如果每次都去做更改,就很麻烦,所以这里要根据不同的脚本区分不同的环境模式
官网:
- .env 在所有的环境中被载入
- .env.local 在所有的环境中被载入,但会被 git 忽略
- .env.[mode] 只在指定的模式中被载入
- .env.[mode].local 只在指定的模式中被载入,但会被 git 忽略
- 在根目录新建文件,文件的格式为.env.mode 我这里分三个环境两个打 包环境一个开发环境,具体看自己项目需求而定
.env.dev 文件,该文件是平时开发所用
NODE_ENV=development
VUE_APP_ENV=dev
VUE_APP_BASE_URL=/api/ (这里这样设置的目的是在开发中一般要设置跨域,这样设置,在axios请求的时候就无需方法名前加/api/,因为下面会设置默认的/api/)
.env.prd文件是生产正式环境所用的
NODE_ENV=production
VUE_APP_ENV=prd
VUE_APP_BASE_URL=http://localhost:8080/
.env.uat文件是生产环境uat测试所用
NODE_ENV=production
VUE_APP_ENV=uat
VUE_APP_BASE_URL=http://localhost:5000/
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们
然后package.json文件scripts中添加该运行和打包脚本:
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"dev": "vue-cli-service serve --mode dev --open",
"prd": "vue-cli-service build --mode prd --report",
"uat": "vue-cli-service build --mode uat --report"
vue-cli-service serve
用法:vue-cli-service serve [options] [entry]
选项:
–open 在服务器启动时打开浏览器
–copy 在服务器启动时将 URL 复制到剪切版
–mode 指定环境模式 (默认值:development)
–host 指定 host (默认值:0.0.0.0)
–port 指定 port (默认值:8080)
–https 使用 https (默认值:false)
vue-cli-service build
用法:vue-cli-service build [options] [entry|pattern]
选项:
–mode 指定环境模式 (默认值:production)
–dest 指定输出目录 (默认值:dist)
–modern 面向现代浏览器带自动回退地构建应用
–target app | lib | wc | wc-async (默认值:app)
–name 库或 Web Components 模式下的名字 (默认值:package.json 中的 “name” 字段或入口文件名)
–no-clean 在构建项目之前不清除目标目录
–report 生成 report.html 以帮助分析包内容
–report-json 生成 report.json 以帮助分析包内容
–watch 监听文件变化
其中的mode 就是指的是哪个环境,serve 默认的是development 在这里指的就是dev环境(就是文件名记住是文件.env后面的dev,不是文件中的代码环境VUE_APP_ENV这个是自定义用于代码中判断所用。)
build默认的是production,指的就是prd环境,同理也是文件名.env.后缀
这样在实际项目中在main.js中直接设置其默认地址即可,会自动设置不同的地址
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
跨域以及html,css以及其他的webpack模块设置在vue.config.js中进行设置
这里在根路径新建vue.config.js文件。
const fs = require('fs')
module.exports = {
productionSourceMap: false,//如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
devServer: {//开发环境代理配置跨域,生产环境不需要
port: 3000,
proxy: {
'/api': {
target: "URL",
ws: true,
changeOrigin: true
}
}
},
css: {
loaderOptions: {
sass: {
data: fs.readFileSync('src/style/common.scss', 'utf-8')//
}
}
}
}
这里只简单的设置了跨域和sass的全局导入loader。
具体的参数配置请参考官网。
PS注意 mode而不是model 。
验证的时候到了
在main.js中打印process.env
npm run dev
可以看到.env.dev中的数据被打印出来了
咻咻~~