Vue项目配置不同环境

webpack

查看环境变量：

console.log('当前环境：', process.env.NODE_ENV)
console.log('ZhixueApp_BASE_URL：', process.env.ZhixueApp_BASE_URL)

注入变量：

dev.env.js（开发环境）

/** @format */

'use strict';

var merge = require('webpack-merge');
var prodEnv = require('./prod.env');
var config = require('./index');

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ,ZhixueApp_BASE_URL:'"/proxy"', //智学App开发环境
});

prod.env.js（生产环境）

/** @format */

'use strict';

module.exports = {
  NODE_ENV: '"production"',
  ,ZhixueApp_BASE_URL:'"https://ali-bg.zhixue.com/"',
};

test.env.js（测试环境）

/** @format */

'use strict';

var merge = require('webpack-merge');
var devEnv = require('./dev.env');

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  ZhixueApp_BASE_URL:'"https://test-ali-bg.zhixue.com/"',
});

设置代理：

config/index.js

module.exports = {
    // 开发配置
  dev: {
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 静态资源文件夹
    assetsSubDirectory: 'assets',
    // 发布路径
    assetsPublicPath: '/',
    // Various Dev Server settings
    host: 'localhost',
    // dev-server监听的端口
    port: 8080,
    cssSourceMap: false,
    devtool: 'cheap-module-eval-source-map',
    // 代理列表, 是否开启代理
    proxyTable: {
      '/tfbyygl': {
      target: 'https://testnb.zhixue.com', 
        secure: false,
        changeOrigin: true
      }
    }
  },
}

验证环境变量

npm run dev
npm run build:test
npm run build:prod

 console.log('当前环境：', process.env.NODE_ENV)
 console.log('ZhixueApp_BASE_URL：',process.env.ZhixueApp_BASE_URL)

生产环境：

测试环境：

开发环境：

vite

使用import.meta.env.MODE

/** 获取请求的基础地址 */
export function getBaseUrl () {
  let CONTEXTPATH = 'https://ali-bg.zhixue.com/'
  switch (import.meta.env.MODE) {
    case 'production':
      // 生产环境
      CONTEXTPATH = 'https://ali-bg.zhixue.com/'
      break
    case 'development':
      // 开发环境 - 使用代理避免跨域
      CONTEXTPATH = '/proxy/'
      // CONTEXTPATH = 'https://test-ali-bg.zhixue.com/'
      break
    case 'testing':
      // 测试环境 - 使用代理避免跨域
      CONTEXTPATH = 'https://test-ali-bg.zhixue.com/'
      break
    default:
      // 默认使用开发环境配置 - 使用代理避免跨域
      CONTEXTPATH = '/proxy/'
  }
  return CONTEXTPATH
}

设置代理：

vite.config.ts

import { defineConfig, loadEnv } from 'vite';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  console.log('mode', mode);
  const proxyTarget = mode === 'production' ? 'https://ali-bg.zhixue.com' : 'https://test-ali-bg.zhixue.com';
  const zxProxyTarget = mode === 'production' ? 'https://www.zhixue.com' : 'https://test.zhixue.com';
  const pdfProxyTarget = mode === 'production' ? 'https://zhixue-gc-bj-sc.oss-cn-beijing.aliyuncs.com' : 'https://zhixuetest-bj-sc.oss-cn-beijing.aliyuncs.com';
  
  return {
    server: {
      host: '0.0.0.0',
      port: 80,
      proxy: {
        '/proxy': {
          target: proxyTarget,
          changeOrigin: true,
          rewrite: (path: string) => path.replace(/^\/proxy/, '')
        },
        '/zx-proxy': {
          target: zxProxyTarget,
          changeOrigin: true,
          rewrite: (path: string) => path.replace(/^\/zx-proxy/, '')
        },
        '/pdf': {
          target: pdfProxyTarget,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/pdf/, '')
        }
      }
    },
  };
});

webpack

vite

评论