vuecli项目打包出测试环境与正式环境方法包括动态域名配置

1.动态域名配置(正式,测试,本地)

Vue.prototype.$url= process.env.NODE_ENV == 'xxx'  ? 'http://www.xxx.com/': process.env.NODE_ENV == 'testing' ? 'http://zzz/' : process.env.NODE_ENV == 'eee' ? 'http://xxx/' :

 

xxx为正式环境(判断运行字段在config文件下取,分别在prod.env,test.env,dev.env下获取)

testing为测试环境字段

2.正常项目都会自带正式,和本地运行命令,现在我们新增一个测试环境打包命令

2.1.在package.json中新增   "test": "node build/test.js"

package.json中新增命令行脚本test命令,并指向build文件夹下的test.js


  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "test": "node build/test.js"
  },

2.2.在build文件夹中新建test.js

 这样就新建了一个test测试环境

2.3.在build文件夹中新建webpack.test.conf.js

2.4,此时我们需要在config文件夹下新建test.js测试环境,加入以下代码即可

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"'
})

2.5.到这配置就完成了,我们打包的命令为test

npm run test打包即为测试环境的包

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中,可以通过配置不同的环境变量来根据不同的环境配置域名。这样在打包时,可以根据不同的环境自动切换域名。 首先,在Vue项目的根目录下,找到`config`文件夹,里面有一个`index.js`文件,这是项目配置文件。 在`index.js`文件中,可以找到`module.exports`对象,里面定义了一些配置项。我们需要添加一个新的配置项来设置不同环境下的域名。 以下是一个示例: ```javascript module.exports = { // ... production: { // 生产环境配置 domain: 'www.example.com' }, development: { // 开发环境配置 domain: 'dev.example.com' }, // ... } ``` 在上面的示例中,我们添加了两个配置项,分别是`production`和`development`。你可以根据需要添加更多的配置项,比如测试环境等。 接下来,在你的代码中,可以通过访问`process.env`来获取当前环境配置。例如,你可以在API请求中使用这个配置项: ```javascript const apiDomain = process.env.NODE_ENV === 'production' ? process.env.production.domain : process.env.development.domain; axios.get(`http://${apiDomain}/api/data`) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); ``` 在上面的示例中,我们通过判断`process.env.NODE_ENV`的值来确定当前的环境,然后根据不同的环境获取对应的域名配置。 最后,在打包时,可以使用不同的环境变量来指定要打包环境。比如,你可以使用以下命令来打包生产环境的代码: ```shell NODE_ENV=production npm run build ``` 这样就可以根据不同的环境配置域名,并在打包时自动切换域名。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值