环境+代理配置+模块化

Dalao_zs

已于 2023-06-08 12:11:58 修改

阅读量194

点赞数

文章标签： javascript webpack 前端

于 2023-05-23 20:39:10 首次发布

本文链接：https://blog.csdn.net/Dalao_zs/article/details/130834900

版权

1.模块化知识补充

1.1 模块化的基础

1.引入目录:默认引入目录中的index.js文件
vuex
  modules
      a.js
    b.js
  index.js //引入a.js  引入 b.js

import store from "vuex";//是vuex中的index.js文件
import api from "../api"; //默认引入的是 index.js

2.从js文件中引入数据
util 
  index.js   Module={}
    export const num=10;// {num:10}
    export const count=100;//{num:10,count:100}
    //{num:10,count:100,default:{num1:20,count1:100}}
    // 1个文件只允许存在一个export default
    export default {  
            num1:20,
            count1:100
        } 

import {num,count} from "../util";//从Module对象中解构
import obj from "../util";// obj等价于 export default 的对象
  //obj={num1:20,count1:100}
import  * as obj1 from "../util"; //obj1 等价于 Module对象

1.2 vue2+webpack模块化的批量操作

字符串处理:
//带括号相当于定义的变量  通过$1 $2 标识
console.log("18179160007".replace(/(\d{3})\d{4}(\d{4})/,"$1****$2"));
console.log("18179160007".replace(/0/g,"a"));
console.log("18179160007".replaceAll("0","a"));
// 0 ,1  ==> 00 01     2022-2-3 ===> 2022-02-03
//th1 总的长度3  不够往字符串前面补0
console.log("2".padStart(3,"-0"));//-02
console.log("12".padStart(3,"-0"))//-12

批量加载文件的封装fileUtil
export function manyImportFile(moduleFiles) {
    let module={};
    moduleFiles.keys().forEach(item=>{
        //1. ./user.js===> user
        let fileName=item.replace(/^\.\/(.*)\.js$/,"$1");
        //2. test/film ==> film
        if(fileName.includes("/")){
            fileName=fileName.substring(fileName.lastIndexOf("/")+1);
        }
        //1.根据文件的路径得到对应Module对象 ./user.js
        let moduleObj=moduleFiles(item);
        //moduleObj.default 得到的是 export default出来的对象
        module[fileName]=moduleObj.default;
    });
    return module;
}

api调用函数
import {manyImportFile} from "../util";
//加载指定目录下所有的资源
const moduleFiles=require.context("./modules",true,/\.js$/);
export default manyImportFile(moduleFiles);

1.3.vue2+webpack组件的批量加载

require.context("./views",true,/\.vue$/);

1.4 vue3+vite模块化的批量操作

export function manyFileModule(moduleObj,fileName="modules") {
    //1.获取所有的文件名
    let module={};
    Object.keys(moduleObj).forEach(fieldName=>{
       let moduleName=fieldName.replace(/\.\/(.*)\.js$/,"$1");
       moduleName=moduleName.replace(`${fileName}/`,"");
       module[moduleName]=moduleObj[fieldName].default;
    });
    return module;
}

//api中导入
import {manyFileModule} from "../util";
const files=import.meta.globEager("./modules/*.js");
let module=manyFileModule(files);
export default module;

1.5 vue3+vite组件批量加载

import.meta.glob("@/views/*.vue");

1.6 vue2 配置别名

const path=require("path");
module.exports={
    configureWebpack:{
        resolve: {
            alias: {
                '@': path.join(__dirname,'./src')
            }
        }
    },
}

1.7 vue3配置别名

在vite.config.js中添加如下配置

//1. npm i path
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path";
export default defineConfig({
    plugins: [vue()],
    resolve:{
        alias:{
            "@":resolve(__dirname,"./src")
        }
    }
});

2. vue2 环境切换配置

开发环境，mode 为 devvelopment，文件名为 .env.development
测试环境，mode 为 test，文件名为 .env.test
生产环境，mode 为 production，文件名为 .env.production

.env.development(开发环境)

NODE_ENV=development
VUE_APP_BASE_API=/dev-api
VUE_APP_BASE_URL=http://localhost:6666/dev/

.env.production(生产环境)

NODE_ENV=production
VUE_APP_BASE_API=/prod-api
VUE_APP_BASE_URL=http://localhost:8888/prod-api/

.env.test(测试环境)

NODE_ENV=test(5以下)/testing(5以上)
VUE_APP_BASE_API=/test-api
VUE_APP_BASE_URL =http://localhost:7777/test/

在package.json文件中添加启动的配置

 "scripts": {
    "dev": "vue-cli-service serve --mode development",
    "prod": "vue-cli-service serve --mode production",
    "test": "vue-cli-service serve --mode test",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test"
  },

调用文件中的配置数据

process.env
{
    BASE_URL: "/",
    NODE_ENV: "test",
    VUE_APP_BASE_API: "/test-api",
    VUE_APP_BASE_URL: "http://localhost:7777/test/"
}

3. vue3 环境切换配置

在不同环境的变量可以定义在 .env.[mode] 文件中，如 .env.dev、.env.prod 等，如果 .env 文件和 .env.[mode] 中有相同的 key，后者定义的值会覆盖前者。

这里咱们以三个环境为例编写 demo，分别是：

开发环境，mode 为 dev，文件名为 .env.dev
测试环境，mode 为 uat，文件名为 .env.uat
生产环境，mode 为 prod，文件名为 .env.prod

.env.dev(开发环境)

VITE_BASE_API=/dev-api
VITE_BASE_URL=http://localhost:6666/dev/

.env.prod(生产环境)

VITE_BASE_API=/prod-api
VITE_BASE_URL=http://localhost:8888/prod-api/

.env.uat(测试环境)

VITE_BASE_API=/uat-api
VITE_BASE_URL =http://localhost:7777/uat/

在package.json文件中添加启动的配置

"scripts": {
    "dev": "vite --mode dev",
    "prod": "vite --mode prod",
    "test": "vite --mode uat",
    "build": "vite build",
    "preview": "vite preview"
  },

调用文件中的配置数据

import.meta.env;
返回的数据格式:
{
    BASE_URL: "/",
    DEV: true,
    MODE: "dev",
    PROD: false,
    SSR: false,
    VITE_BASE_API: "/dev-api",
    VITE_BASE_URL: "http://localhost:6666/dev/"
}

4.React环境切换配置

4.1 方法一

在 package.json 文件中配置命令

  "scripts": {
    "start:dev": "set REACT_APP_MODE=dev&& react-scripts start",
    "start:test": "set REACT_APP_MODE=test&& react-scripts start",
    "start:pro": "set REACT_APP_MODE=pro&& react-scripts start",
    "build:dev": "set REACT_APP_MODE=development&& react-scripts build",
    "build:pro": "set REACT_APP_MODE=production&& react-scripts build",
    "eject": "react-scripts eject"
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
  }

在 src 目录下新建一个文件夹 config 里面写几个文件(src 目录)

api_development.js

let url = {
  homeurl: 'www.dev.com',
}
export default url

api_production.js

let url = {
  homeurl: 'www.pro.com',
}
export default url

api_test.js

let url = {
  homeurl: 'www.test.com',
}
export default url

在 src 目录下在新建一个 config.js 文件

import developmentapi from './config/api_development.js'
import productionapi from './config/api_production.js'
import testapi from './config/api_test.js'
let url
if (process.env.REACT_APP_MODE === 'development') {
  console.log('开发环境')
  url = developmentapi
} else if (process.env.REACT_APP_MODE === 'production') {
  console.log('生产环境')
  url = productionapi
} else if (process.env.REACT_APP_MODE === 'test') {
  console.log('测试环境')
  url = testapi
} 
export default url;

4.2.方法二

(1)在项目的根目录新建 .env文件对应的文件写下面的代码

REACT_APP_BASE_URL_DEV = 'https://www.dev.com'
REACT_APP_BASE_URL_TEST = 'https://www.test.com'
REACT_APP_BASE_URL_PRO= 'https://www.pro.com'

(2) 安装 cross-env

yarn add cross-env -dev

(3.) 在 package.json 文件中配置命令

 "scripts": {
    "start": "react-scripts start",
    "start:dev": "cross-env REACT_APP_ENV=development react-scripts start",
    "start:test": "cross-env REACT_APP_ENV=test react-scripts start",
    "start:prod": "cross-env REACT_APP_ENV=production react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

（4）.动态获取地址

let url="/";
if(process.env.REACT_APP_ENV=="development"){
  url= process.env.REACT_APP_BASE_URL_DEV;
}else if(process.env.REACT_APP_ENV=="test"){
    url= process.env.REACT_APP_BASE_URL_TEST;
}else if(process.env.REACT_APP_ENV=="production"){
    url= process.env.REACT_APP_BASE_URL_PRO;
}else{
    url= "/";
}
export const BASE_URL=url;

5. umiJS 环境切换配置

(1)在项目的根目录新建 .env文件对应的文件写下面的代码

NODE_ENV=development
UMI_APP_BASE_API_DEV=/api-dev
UMI_APP_BASE_API_TEST=/api-test
UMI_APP_BASE_API_PROD=/api-prod

UMI_APP_BASE_URL_DEV = https://localhost:6666
UMI_APP_BASE_URL_TEST = https://localhost:7777
UMI_APP_BASE_URL_PROD= https://localhost:8888

(2) 安装 cross-env

yarn add cross-env --dev

(3.) 在 package.json 文件中配置命令

"scripts": {
    "start": "umi dev",
    "start:dev": "cross-env UMI_APP_ENV=development umi dev",
    "start:prod": "cross-env UMI_APP_ENV=production umi dev",
    "start:test": "cross-env UMI_APP_ENV=test umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },

（4）.动态获取地址

let url="/";
if(process.env.UMI_APP_ENV=="development"){
  url= process.env.UMI_APP_BASE_URL_DEV;
}else if(process.env.UMI_APP_ENV=="test"){
    url= process.env.UMI_APP_BASE_URL_TEST;
}else if(process.env.UMI_APP_ENV=="production"){
    url= process.env.UMI_APP_BASE_URL_PRO;
}else{
    url= "/";
}
export const BASE_URL=url;

6. vue2配置代理服务器

vue.config.js文件中添加如下配置:

const path=require("path");
module.exports={
    configureWebpack:{
        resolve: {
            alias: {
                '@': path.join(__dirname,'./src')
            }
        }
    },
    devServer: {
        port: process.env.VUE_PORT,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/api': {
                target:process.env.VUE_APP_BASE_URL,
                changeOrigin: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    },
}

7. vue3 配置代理服务器

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path";

export default ({mode})=> defineConfig({
    plugins: [vue()],
    resolve:{
        alias:{
            "@":resolve(__dirname,"./src")
        }
    },
    server: {
        port:loadEnv(mode,process.cwd()).VITE_PORT,
        proxy: {
            '/api': {
                target: loadEnv(mode,process.cwd()).VITE_BASE_URL,
                changeOrigin: true,
                rewrite:(path)=>path.replace(/^\/api/,"")
            }
        }
    },
});

8.React 配置代理

下载依赖http-proxy-middleware 2以上

yarn add http-proxy-middleware

在react的src目录下新建setupProxy.js

const {createProxyMiddleware} = require('http-proxy-middleware')//引入http-proxy-middleware，react脚手架已经安装
module.exports= (app)=>{
    app.use(
        createProxyMiddleware('/api-dev',{
            target:'http://localhost:6666',
            secure: false,
            changeOrigin:true,
            pathRewrite:{'^/api-dev':''}
        }),
        createProxyMiddleware('/api-test',{
            target:'http://localhost:7777',
            secure: false,
            changeOrigin:true,
            pathRewrite:{'^/api-test':''}
        }),
        createProxyMiddleware('/api-prod',{
            target:'http://localhost:8888',
            secure: false,
            changeOrigin:true,
            pathRewrite:{'^/api-prod':''}
        }),
    )
}

9.umi配置代理

在umirc.ts中添加代理配置

 proxy: {
        '/api-dev': {
            'target': "http://localhost:6666",
            'changeOrigin': true,
            'pathRewrite': { '^/api-dev': '' },
        },
        '/api-test': {
            'target': "http://localhost:7777",
            'changeOrigin': true,
            'pathRewrite': { '^/api-test': '' },
        },
        '/api-prod': {
            'target': "http://localhost:8888",
            'changeOrigin': true,
            'pathRewrite': { '^/api-prod': '' },
        },
    },

fileUtil封装

let url:any="/";
let api:any="/api";
if(process.env.UMI_APP_ENV=="development"){
    url= process.env.UMI_APP_BASE_URL_DEV;
    api=process.env.UMI_APP_BASE_API_DEV;
}else if(process.env.UMI_APP_ENV=="test"){
    url= process.env.UMI_APP_BASE_URL_TEST;
    api=process.env.UMI_APP_BASE_API_TEST;
}else if(process.env.UMI_APP_ENV=="production"){
    url= process.env.UMI_APP_BASE_URL_PROD;
    api=process.env.UMI_APP_BASE_API_PROD;
}else{
    url= "/";
}
export const BASE_URL=url;//服务器图片可能用到
export const BASE_API=api;
axios

import {BASE_API} from "./fileUtil";
axios.defaults.baseURL=BASE_API;

Dalao_zs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
环境+代理配置+模块化

(1)在项目的根目录新建 .env文件对应的文件写下面的代码。(1)在项目的根目录新建 .env文件对应的文件写下面的代码。(3.) 在 package.json 文件中配置命令。(3.) 在 package.json 文件中配置命令。在package.json文件中添加启动的配置。在package.json文件中添加启动的配置。在vite.config.js中添加如下配置。.env.development(开发环境)在 package.json 文件中配置命令。.env.production(生产环境)
复制链接

扫一扫