生产环境mock服务404

[fontcoderrrrrrr]

感谢您的帮助！ vite.config.js配置如下

import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";
import { defineConfig } from "vite";


const localEnabled = process.env.USE_MOCK || false;
const prodEnabled = process.env.USE_CHUNK_MOCK || false;

export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
            mockPath: "./src/server/mock",
            localEnabled: localEnabled as boolean, // 开发打包开关
            prodEnabled: prodEnabled as boolean, // 生产打包开关
            // 这样可以控制关闭mock的时候不让mock打包到最终代码内
            injectCode: `
              import { setupProdMockServer } from './mockProdServer';
              setupProdMockServer();
            `,
            logger: false, //是否在控制台显示请求日志
            supportTs: false
        })
    ],
});

mock服务配置如下：

import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
import testMock from "./server/mock/test";

export const mockModules = [...testMock];

export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

在开发环境中是正常的，但在开发环境中404 并且我注意到在编译后的js文件中，setupProdMockServer()函数放在mount('#app')之后生产环境失败； clone:()=>l,text(){return Promise.resolve(o)},json(){return Promise.resolve(o)}};return l}const mockModules=[...testMock];function setupProdMockServer(){createProdMockServer(mockModules),createFetchSever(mockModules)}createApp(App).mount("#app",!0);**setupProdMockServer()**;

而当在main.ts文件中加入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 加入这行代码，生产环境可以成功
import {setupProdMockServer} from './mockProdServer';
    setupProdMockServer();
// 
createApp(App).mount('#app',true)

此时编译后的js文件变为了 return Mock.mock(r)}}function __setupMock__(e=0){e&&Mock.setup({timeout:e})}const testMock=[{url:"/api/getUser",method:"get",response:()=>({code:200,message:"ok",data:["tom","jerry"]})}],mockModules=[...testMock];function setupProdMockServer(){createProdMockServer(mockModules)}**setupProdMockServer()**;createApp(App).mount("#app",!0);**setupProdMockServer();**

通过此种现象表明setupProdMockServer()函数在mount之前执行，生产环境才能成功；

那么有什么好的方式，可以不侵入main.ts，生产环境也可以使用mock数据，希望各位赐教，感谢！

[wangkejugithub]

只需要将插件源码中dist目录下的index文件中transform方法的返回值作调整就行，将injectCode放置于code之前即可

// 第339行
 return {
        map: needSourcemap ? this.getCombinedSourcemap() : null,
        code: `${injectCode}${code}`
 };

但是总不可能每次都去修改插件源码吧😅

[shenshuai89]

按照上面2个方式操作后，为什么生产环境中仍然是404

[shenshuai89]

按照上面2个方式操作后，为什么生产环境中仍然是404

原来的mock文件中使用了type，将type改为method之后就正常了。https://github.com/shenshuai89/vue3-elementplus-admin/blob/main/mock/modules/user.ts#L65

[charlie447]

I also cannot mock data in production build. The requests return 404.

    // deps
    "vue": "^3.3.2",
    "mockjs": "^1.1.0",
    // dev-deps
    "vite": "^4.3.5",
    "vite-plugin-mock": "^2.9.8",