前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue多环境配置问题2020

Vue多环境配置问题2020

作者头像
程序员不务正业
发布2020-03-20 10:09:26
9310
发布2020-03-20 10:09:26
举报
  • 安装cross-env
npm install cross-env --save-dev
  • 修改package.json文件
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev--test": "cross-env env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev--prod": "cross-env env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "build--test": "cross-env env_config=test node build/build.js",
    "build--prod": "cross-env env_config=prod node build/build.js"
},
1、打测试包和生产包
  • config文件夹中新建test.env.js
'use strict'
 module.exports = {
 DATA_ENVIRONMENT: '"test"',//代码中判断是什么数据环境
  API_HOST: '"http://ceshi/"'  // 自己测试服务器ip地址
}
  • config文件夹中修改 prod.env.js
module.exports = {
 NODE_ENV: '"production"',
 DATA_ENVIRONMENT: '"prod"',
 API_HOST: '"http://prod/"' // 自己生产服务器ip地址
};
  • 修改webpack.prod.conf.js
const env = process.env.env_config == 'test'? require('../config/test.env') : require('../config/prod.env')

此处env_config是通过package.json中传递的

2、 本地访问测试和生产
  • 新建devt.env.js, 带t
"use strict";
   const merge = require("webpack-merge");
   const testEnv = require("./test.env");
   module.exports = merge(testEnv, {
   API_HOST: '"/api"'
});
  • 修改dev.env.js,没有t
'use strict'
  const merge = require('webpack-merge')
  const prodEnv = require('./prod.env')
  module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api"',
})
  • 修改跨域ip,config文件夹中 index.js
  • dev下修改 proxyTable
proxyTable: {
      "/api": {
        // 生产--环境       
        target: process.env.env_config == 'test' ? "http://tapi.asysn1.com" : "http://tapi.asysn.com", 
        changeOrigin: true, //跨域
        pathRewrite: {
          "^/api": "/"
        }
    }
},
  • 修改build文件夹下 webpack.dev.conf.js中
new webpack.DefinePlugin({
      'process.env': process.env.env_config == 'test' ? require('../config/devt.env') : require('../config/dev.env')
}),
  • 本地运行

本地访问测试环境:npm run dev--test

本地访问生产环境:npm run dev--prod

  • 不同环境打包

打包测试环境:npm run build--test

打包生产环境:npm run build--prod

结束!!!!!!!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、打测试包和生产包
  • 2、 本地访问测试和生产
  • 结束!!!!!!!
相关产品与服务
测试服务
测试服务 WeTest 包括标准兼容测试、专家兼容测试、手游安全测试、远程调试等多款产品,服务于海量腾讯精品游戏,涵盖兼容测试、压力测试、性能测试、安全测试、远程调试等多个方向,立体化安全防护体系,保卫您的信息安全。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档