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       监听 - 当有改变时 自动重新打包~

 

posted @ 2020-09-24 14:54  鱿鱼须须  阅读(203)  评论(0编辑  收藏  举报