Vue 项目分环境打包

AlienZHOU 发布于2019-08-02 11:07 / 793人阅读

摘要：我们开发项目的时候，用版本新建的项目，只有两种开发环境有时需要个环境来给测试使用，所以找了很多方法，总结了个最简单的方法来给大家使用在下面添加一个运行命令在中修改代码读取系统运行时候的变量控制台日志输出判断环境变量，是，还是此处替换为测

我们开发项目的时候，用vue-cli 2.x版本新建的项目，只有dev, pro两种开发环境, 有时需要个test环境来给测试使用，所以找了很多方法，总结了个最简单的方法来给大家使用

package.json

在build下面添加一个test运行命令

 "test": "node build/build.js"

prod.env.js

在config -> prod.env.js 中修改代码

  "use strict"
  // 读取系统运行时候的变量
  const target = process.env.npm_lifecycle_event;
  // 控制台日志输出
  console.log("env is deploying, current env is", target)
  // 判断环境变量，是test，还是build
  if (target == "test") {
    var obj = {
      NODE_ENV: ""production"",
      API_ROOT: ""此处替换为测试环境地址"",
    }
  } else {
    var obj = {
      NODE_ENV: ""production"",
      API_ROOT: ""此处替换为测试环境地址"",
    }
  }
    
  module.exports = obj;

3.测试环境：

$ npm run test

正式环境: 
```
$ npm run build
```

GPU云服务器云服务器 Vue实现分页 python项目打包服务器打包项目 eclipse项目打包war

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52775.html

vue-cli3环境变量与分环境打包

摘要：一般情况下项目有三个默认模式模式用于模式用于和模式用于模式不等同于，一个模式可以包含多个环境变量。你可以通过为文件增加后缀来设置某个模式下特有的环境变量。第一步 : 了解环境变量概念我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .e...

gotham 2019-08-23 15:13 评论0 收藏0
Vue 项目分环境打包

摘要：我们开发项目的时候，用版本新建的项目，只有两种开发环境有时需要个环境来给测试使用，所以找了很多方法，总结了个最简单的方法来给大家使用在下面添加一个运行命令在中修改代码读取系统运行时候的变量控制台日志输出判断环境变量，是，还是此处替换为测我们开发项目的时候，用vue-cli 2.x版本新建的项目，只有dev, pro两种开发环境, 有时需要个test环境来给测试使用，所以找了很多...

chavesgu 2019-08-29 16:15 评论0 收藏0
Vue 项目分环境打包

摘要：我们开发项目的时候，用版本新建的项目，只有两种开发环境有时需要个环境来给测试使用，所以找了很多方法，总结了个最简单的方法来给大家使用在下面添加一个运行命令在中修改代码读取系统运行时候的变量控制台日志输出判断环境变量，是，还是此处替换为测我们开发项目的时候，用vue-cli 2.x版本新建的项目，只有dev, pro两种开发环境, 有时需要个test环境来给测试使用，所以找了很多...

Godtoy 2019-08-23 10:37 评论0 收藏0
vue实现分环境打包步骤（给不同的环境配置相对应的打包命令）

在新建好的项目中，一般执行npm run build就是打包了，但此时只能打包到一个环境，不同环境需要配置不同的地址，可以手动更改接口的地址，也可以自行配置命令而不需要每次打包进行地址切换，步骤如下：文件结构如下图： showImg(https://segmentfault.com/img/bVbtsAE?w=255&h=536); 1）在config文件内新建test.env.js文件： u...

idealcn 2019-08-23 17:56 评论0 收藏0