vue-cli3创建项目及多环境打包配置
1、安装全局脚手架 npm i -g @vue/cli 2、创建项目 vue create [项目名称] 3、安装常用插件 vue add element vue add router vue add axions vue add vuex 4、安装scss插件(按需) npm i --save sass-loader npm i --save node-sass 5、启动/打包 npm run serve npm run buil 多环境打包配置 1、在package.json文件中添加 "build-dev": "vue-cli-service build --mode dev", "build-test": "vue-cli-service build --mode test", "build-prod": "vue-cli-service build --mode prod", 2、在项目根目录新建.env.dev,新建.env.test,新建.env.prod NODE_ENV = 'production' VUE_APP_BASE_URL = 'http://192.168.1.1:8080/' 3、在axios配置以下 process.env.VUE_APP_BASE_URL vue-cli 3.0 脚手架cli-service配置说明 "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" } Usage: vue-cli-service serve [options] Options: --open 服务器启动时打开浏览器 --copy 将URL复制到服务器启动时的剪贴板 (直接到浏览器去粘贴就OK了 http://localhost:8080/) --mode 指定环境模式 (默认: development) --host host 地址 (default: 0.0.0.0) --port 端口号 (default: 8080) --https 使用https (default: false) Usage: vue-cli-service build [options] [entry|pattern] Options: --mode 指定环境模式 (default: production) --dest 指定输出目录 (default: dist) --modern 构建两个版本的 js 包:一个面向支持现代浏览器的原生 ES2015+ 包,以及一个针对其他旧浏览器的包。 --target 允许您以项目库或Web组件的形式在项目内部构建任何组件 app | lib | wc | wc-async (default: app) ??? --name lib或者web组件库的名称 (default: "name" in package.json or entry filename) --no-clean 在构建项目之前不要删除输出目录(dist) --report 生成report.html以帮助分析包内容 --report-json 生成report.json来帮助分析包内容 --watch 监听 - 当有改变时 自动重新打包~