Vue3+Vite+TS项目使用Mockjs数据发布到生产环境坑汇总

首先在发布的项目Mock数据这块参考了以下一些项目：

https://github.com/iotjin/jh-vue3-admin

https://github.com/kailong321200875/vue-element-plus-admin

首先安装依赖 pnpm i vite-plugin-mock --save-dev

配置.env文件(可以分成不同环境进行配置) 注：接口前缀和这里配置的VITE_API_BASE_PATH保持一致

# 接口前缀
VITE_API_BASE_PATH=/api
# 是否开启mock
VITE_USE_MOCK=true
VITE_APP_USE_MOCK=true

配置vite.config.ts文件，如下(注：prodEnabled需要配置成true才能在生产环境打包mock)：

 viteMockServe({
            ignore: /^\_/,
            mockPath: 'mock',
            watchFiles: true,
            localEnabled: false,
            prodEnabled: true,
            injectCode: `
            import { setupProdMockServer } from '../mock/_createProductionServer'
            setupProdMockServer()
          `,injectFile:resolve('./src/main.ts'),
          })

 在mock文件夹下创建_createProductionServer.ts文件，注意这里import.meta.glob()引入的文件路径可以使用通配符，需要注意书写格式，要能够成功引入这些ts才行，引入不成功，也不会报错，打包后在生产环境非常难以debug

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'

const modules = import.meta.glob('/mock/dir/*.mock.ts', {
  import: 'default',
  eager: true,
})
const mockModules: any[] = []
Object.keys(modules).forEach(async (key) => {
  if (key.includes('_')) {
    return
  }
  mockModules.push(...(modules[key] as any))
})
export function setupProdMockServer() {
  createProdMockServer(mockModules)
}

main.ts中引用上面这个模块的 setupProdMockServer()并调用,注这里一定要调用否则发布到生产的时候就无法访问接口，接口会返回405,404的错误

import { setupProdMockServer } from '../mock/_createProductionServer'
setupProdMockServer()

使用npm run build:pro打包 这个构建项目自动生成的 script是这样写的

"scripts":{
    "build:pro": "pnpm vite build --mode pro",
}

构建完成后可以通过vscode中的LiveServer这个扩展打开，或者通过node安装http-server打开，

通过本地打开会出现空白页面的情况是因为里面接口或者文件返回会出现跨域的情况 

 

这样就能最终访问了，最终完成效果是这样：

但有个问题是 调用接口的时候控制台的NetWork中无法看到，这是因为这里没有真正的服务器的，是通过mockjs对接口进行拦截处理的

但是 如果mockjs在生产环境没有打包好，或者上面的配置有问题的话，则会正常调用接口，并且会报405,404的错误，因为mock拦截没成功，请求正常触发找不到资源就会报错