3版本的在生产构建后mock失败

[SoldierAb]

1. 文档与API不兼容

2. package.json 如下

{
  "name": "xxx",
  "version": "1.0.0",
  "private": true,
  "description": "xxx",
  "main": "core/index.ts",
  "scripts": {
    "test": "cross-env NODE_ENV=test jest",
    "test:update": "cross-env NODE_ENV=test jest --updateSnapshot --coverage",
    "info": "npm run test && esno scripts/info.ts",
    "dev": "npm run info && vitepress dev",
    "build": "npm run info && vitepress build"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-typescript": "^7.21.5",
    "@jest/globals": "^29.5.0",
    "@types/jest": "^29.5.1",
    "@vueuse/core": "^10.1.2",
    "axios-mock-adapter": "^1.21.4",
    "babel-jest": "^29.5.0",
    "cross-env": "^7.0.3",
    "esno": "^0.16.3",
    "fs-extra": "^11.1.1",
    "gray-matter": "^4.0.3",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "js-base64": "^3.7.5",
    "simple-git": "^3.19.0",
    "unplugin-vue-components": "^0.25.1",
    "vite-plugin-mock": "^3.0.0",
    "vitepress": "^1.0.0-beta.1",
    "vue": "^3.2.25"
  }
}

3. 生产构建完之后， 利用nginx部署

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
worker_rlimit_nofile 20480;

events {
  use epoll;
  worker_connections 20480;
  multi_accept on;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    #请求量级大建议关闭acccess_log
    #access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;
	underscores_in_headers on;

    keepalive_timeout  65;

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_types application/javascript application/json;
    
    include /etc/nginx/conf.d/*.conf;

    server {
        listen 5001;
        root /data/web;
        charset utf-8;
        client_max_body_size 75M;
        
        location / {
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }

    }
}

部署启动之后mock访问失败

[sir-ran]

一样的，生产环境不行，没人管的，

[codepandy]

我也遇到了，但是发现github上最新的版本是2.9.1，安装2.9.1就行了

[gosear]

API有变化。我看别人是这样配置的： vite中的配置更改为：

viteMockServe({
        mockPath: "./src/api/mock",
        enable: true,
      }),

生产环境在入口文件（main.ts）中添加：

// 生产环境使用mock开启：production mock server
if (process.env.NODE_ENV === "production") {
  import("@/api/mockProdServer").then(({ setupProdMockServer }) => {
    setupProdMockServer();
  });
}

创建mockProdServer.ts，生产环境引入全部mock文件：

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import { createProdMockServer } from "vite-plugin-mock/client";

const modules: {
  [key: string]: { default: object[] };
} = import.meta.glob("./mock/*.ts", {
  eager: true,
});

const mockModules: object[] = [];
Object.keys(modules).forEach(key => {
  if (key.includes("/_")) {
    return;
  }
  mockModules.push(...modules[key].default);
});

/**
 * Used in a production environment. Need to manually import all modules
 */
export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

打包后会生成这种文件：

亲测有效，只是生产环境看不到网络请求了

[Ludidi]

API有变化。我看别人是这样配置的： vite中的配置更改为：

viteMockServe({
        mockPath: "./src/api/mock",
        enable: true,
      }),

生产环境在入口文件（main.ts）中添加：

// 生产环境使用mock开启：production mock server
if (process.env.NODE_ENV === "production") {
  import("@/api/mockProdServer").then(({ setupProdMockServer }) => {
    setupProdMockServer();
  });
}

创建mockProdServer.ts，生产环境引入全部mock文件：

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import { createProdMockServer } from "vite-plugin-mock/client";

const modules: {
  [key: string]: { default: object[] };
} = import.meta.glob("./mock/*.ts", {
  eager: true,
});

const mockModules: object[] = [];
Object.keys(modules).forEach(key => {
  if (key.includes("/_")) {
    return;
  }
  mockModules.push(...modules[key].default);
});

/**
 * Used in a production environment. Need to manually import all modules
 */
export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

打包后会生成这种文件：

亲测有效，只是生产环境看不到网络请求了

我按照这种方式做了，发现还是不行，请求过去后其实都走路由了

[gosear]

API有变化。我看别人是这样配置的： vite中的配置更改为：

viteMockServe({
        mockPath: "./src/api/mock",
        enable: true,
      }),

生产环境在入口文件（main.ts）中添加：

// 生产环境使用mock开启：production mock server
if (process.env.NODE_ENV === "production") {
  import("@/api/mockProdServer").then(({ setupProdMockServer }) => {
    setupProdMockServer();
  });
}

创建mockProdServer.ts，生产环境引入全部mock文件：

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import { createProdMockServer } from "vite-plugin-mock/client";

const modules: {
  [key: string]: { default: object[] };
} = import.meta.glob("./mock/*.ts", {
  eager: true,
});

const mockModules: object[] = [];
Object.keys(modules).forEach(key => {
  if (key.includes("/_")) {
    return;
  }
  mockModules.push(...modules[key].default);
});

/**
 * Used in a production environment. Need to manually import all modules
 */
export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

打包后会生成这种文件： 亲测有效，只是生产环境看不到网络请求了

我按照这种方式做了，发现还是不行，请求过去后其实都走路由了

可能是每个项目的依赖不一样，我这边这个项目是可以用的