vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue项目根据不同运行环境打包项目

Vue项目如何根据不同运行环境打包项目

作者：小破孩呦

这篇文章主要介绍了Vue项目如何根据不同运行环境打包项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

场景

在开发过程中，通常会遇到这样的问题：

在开发环境、测试环境和生产环境中我们会用到不一样的服务接口

在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口

多端一体的项目模式

这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。

这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。

第一步 安装依赖 cross-env

使用 cross-env 解决跨平台问题。

在终端运行：

npm install cross-env --save-dev  // 安装 cross-env 依赖

第二步 修改 package.json 文件

在 package.json 中 scripts 属性中 build 命令替换为：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "cross-env vue-cli-service build --mode test",
    "build:prod": "cross-env vue-cli-service build --mode production",
},

当我们需要配置多个环境变量时，未避免package.json命令过长，这时候就可以选择模式配置

默认模式

vue-cli项目下默认有三种模式：

每个模式都会将 NODE_ENV设置为模式的名称，比如在development模式下，NODE_ENV为 ‘development’。

自定义模式

自定义模式需要通过.env文件进行配置，.env文件分为以下类型：

例：通过在package.json脚本中增加 --mode [mode]来指定模式。

// package.json
{
  "scripts": {
      "build:testing": "cross-env vue-cli-service build --mode testing",
  }
}

第三步 创建不同环境的文件

在项目根目录新建  .env.development文件：

// 开发环境模式 
// 环境变量
NODE_ENV=development
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'development'

在项目根目录新建  .env.test文件：

// 测试环境模式
// 环境变量（这里的环境变量是跟打包有关的，production则会进行压缩代码等，真正跟每个环境有关的变量是下面以VUE_APP开头的变量）
NODE_ENV=test
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'test'

在项目根目录新建  .env.production文件：

// 线上环境模式
// 环境变量
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'production'

第四步 根据配置进行判断使用不同的环境服务

let baseUrl = '';
let env = process.env;
 
if (env.VUE_APP_ENV === 'development') {
    baseUrl = `http://xxx/`; // 本地服务地址
} else if(env.VUE_APP_ENV === 'production'){
    baseUrl = `http://xxx/`; // 正式环境服务地址
}else if(env.VUE_APP_ENV === 'test'){
    baseUrl = `http://xxx/`; // 测试环境服务地址
}
export {
    baseUrl,
    env
}

第五步 打包项目

// 测试环境打包项目
npm run build:test
 
// 生产环境打包项目
npm run build:prod

结果测试：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文