vite-plugin-mock icon indicating copy to clipboard operation
vite-plugin-mock copied to clipboard

生成环境打包mock好像用不了啊

Open zpliu1126 opened this issue 1 year ago • 3 comments

我在开发环境能正常使用,但是打包到生产环境后就出问题了

版本


"vite": "^5.4.10",
"vite-plugin-vue-devtools": "^7.3.1"
"mockjs": "^1.1.0",
"vite-plugin-mock": "^3.0.2",
 "vue": "^3.4.29",

vite.config.js 配置

// 文件路径 @/src/ vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    viteMockServe({
      // default
      mockPath: 'mock',
      ignore: /^\_/,
      enable: true,
      logger: true,
      watchFiles: true
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

mocker 接口配置

// 文件路径 @/mock/test.mock.ts
import { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/dist/api/carousl/info',
    method: 'get',
    response: () => {
      return {
        code: 0,
        data: {
          'list|1-10': [
            {
              title: '@title()',
              url: "@image('750x270', '#4A7BF7', 'Hello')"
            }
          ]
        }
      }
    }
  }
] as MockMethod[]


mockProdServer.ts配置

// 文件路径 @/src/mockProdServer.ts
// 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/*.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)
  console.log(mockModules)
}

main.js 中引用

// 文件路径 @/src/main.js
if (process.env.NODE_ENV === 'production') {
  import('@/mockProdServer').then(({ setupProdMockServer }) => {
    setupProdMockServer()
  })
}

打包后在生产环境无法正常mock image

zpliu1126 avatar Nov 03 '24 05:11 zpliu1126

不知道这个mockProdServer.ts配置怎么用的,是不是少了一步

GOGOGOSIR avatar Mar 08 '25 11:03 GOGOGOSIR

我也遇到了

yluiop123 avatar Jun 22 '25 14:06 yluiop123

createMockProdServer配置差不多,依赖版本是"devDependencies": { "vite-plugin-mock": "2.9.8", "mockjs": "^1.1.0", }但也不行,生产上访问mock url显示404(使用vite preview也是,有些返回的200或者304状态的响应内容也不是mock接口数据而是一个index.html),开发环境正常返回mock数据,不知道有没有人解决过

NotNullPointer avatar Dec 02 '25 17:12 NotNullPointer