专栏首页移动端周边技术扩展Vue多环境配置问题2020

Vue多环境配置问题2020

  • 安装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

结束!!!!!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js学习笔记(3)

    程序员不务正业
  • Vue(CLI3.0)多环境配置问题2020

    程序员不务正业
  • weex开发之push路径定义与处理

    程序员不务正业
  • vue-cli 解决白屏、兼容、压缩及清除console

    描述 npm run build打包后,生成 dist文件夹。从该文件夹打开 dist/index.html页面,发现页面空白,且控制台报错。原因是路径配置有问...

    流眸
  • JDK1.8下关于MethodHandle问题

    温安适
  • 从Rust到远方:ASM.js星系

    来源: https://mnt.io/2018/08/28/from-rust-to-beyond-the-asm-js-galaxy/

    MikeLoveRust
  • 初学用记事本运行java报错:找不到或无法加载主类解决方法,部分出错解决办法

    刚开始学习java的人第一个程序可能通过记事本运行,当中间可能会会出现各种错误,我在下面间可能解决出现的问题

    cuptobjut
  • Linux下文件的隐藏属性

    Linux下文件的隐藏属性 linux除了9个权限外,还有些隐藏属性, 使用chattr命令来设置 chattr 设置文件的隐藏属性   #chattr [+-...

    汤高
  • 让Monad来得更猛烈些吧_Haskell笔记11

    最早接触过IO Monad,后来又了解了Maybe Monad和List Monad,实际上还有很多Monad(比如Writer Monad、Reader Mo...

    ayqy贾杰
  • 【Android】如何知道某个Activity是否在前台?

    Gavin-ZYX

扫码关注云+社区

领取腾讯云代金券