Vue 项目分环境打包的方法示例

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

1、package.json

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

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

2、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
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli3环境变量与分环境打包的方法示例

    第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 环境变量文件只包含环境变量的"键=值"对: FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用 除

  • Vue项目分环境打包的实现步骤

    在项目开发中,我们的项目一般分为开发版.测试版.Pre版.Prod版.Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦.如果能根据不同环境打包就完美了.网上搜集了许多资料,现在可以分环境打包程序了,至于怎么打,接着住下看吧. 第1步:安装cross-env 在项目目录下运行如下命令安装cross-env,我的ide是webstorm,要以直接在ide里的Terminal窗口中运行,也可能通过windows的CMD.Li

  • vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)

    在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: 文件结构如下图: 1)在config文件内新建test.env.js文件: 'use strict' module.exports = { NODE_ENV: '"testing"', ENV_CONFIG:'"test"' } 2)修改config内的prod.en

  • Vue 项目分环境打包的方法示例

    Vue 项目分环境打包的方法示例

    我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用 1.package.json 在build下面添加一个test运行命令 "test": "node build/build.js" 2.prod.env.js 在config -> prod.env.js 中修改代码 'use strict' // 读取系统运行时候的变量 con

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • 创建Vue项目以及引入Iview的方法示例

    创建Vue项目 以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev 以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法. 我创建Vue项目过程 $ vue init webpack

  • vue cli3 实现分环境打包的步骤

    vue cli3 实现分环境打包的步骤

    用cli3搭建的vue项目号称零配置文件,为了方便打包(不用手动来回改不同环境进行打包)那么我们在需要打包的时候分不同环境打包怎么办呢 1.在根目录下创建三个配置文件,如下图 这里我创建了三个,这三个分别是我的 本地:离线:线上环境 ,三个文件的内容依次为下VUE_APP_TITLE要对应当前文件后缀,build 对应的production NODE_ENV = 'production' VUE_APP_TITLE = 'alpha' ==============================

  • Vue自动构建发布脚本的方法示例

    简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .

  • 解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

随机推荐