位置:首页 > web前端 > vue

cli3搭建vue项目配置不同打包命令生成不同运行环境

dearweb 发布:2021-07-28 10:43:15阅读:

其实cli3配置较cli而言简单太多了,只需要简单的配置一下,就可以实现不同打包命令生成不同运行环境,下面就跟着小编一起来学习吧。

首先第一步在package.json配置以下信息 

"scripts": {
        "dev": "vue-cli-service serve",  // 本地环境
        "build:stage": "vue-cli-service build --mode development", // 测试环境
        "build:prod": "vue-cli-service build --mode production",  // 生产环境
    },

第二步添加四个文件和package.json同级目录下(根路径下)

.env.development  对应测试环境

# 开发环境配置
ENV = 'development'

# 本地开发环境
VUE_APP_BASE_API = '测试环境'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.dev 对应本地开发环境

# 开发环境配置
ENV = 'dev'

# 本地开发环境
VUE_APP_BASE_API = '开发环境'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production 对应正式/线上环境

# 生产环境配置
ENV = 'production'

# 若依管理系统/本地开发环境
VUE_APP_BASE_API = '生产环境'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

根据 ENV 来区分不同环境的;

根据不同的环境设置不同的baseUrl,最终根据不同的命令打包上线即可;

执行 npm run build-test 就会打包测试环境的接口地址

执行 npm run build-prod 就会打包正式环境的接口地址;

cli3打包的另一种方式

1.package.json配置如下

 "scripts": {
    "npm run serve": "表示本地开发",
    "npm run build": "表示测试环境打包命令",
    "npm run build-prod": "表示正式环境打包命令",
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode test",
    "build-prod": "vue-cli-service build --mode production"
  },

2.然后只需要新建一个js文件,内容如下就ok

const modeUrlObj={
   // 生产环境
   'production':{
       store_api_url:'http://api.com/production'
   },
   // 测试环境
   'test':{
       store_api_url:'http://api.com/production'
   },
   // 本地环境
   'development':{
       store_api_url:'http://api.com/production'
   },
}

export default modeUrlObj[process.env.NODE_ENV]

配置好了之后,直接本地测试一下即可。

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看