vue中遇到的问题

在vue项目中用mock遇到的问题

最近发现项目中需要运用mock来模拟数据，我前面去mock官网看，那些基本的清晰易懂，但是发现在项目中不会用，这就是个很大的问题。我是按照这个链接学到的【精选】Mock 使用方式 + 在 Vue 项目中使用 Mock_vue mock-优快云博客，但是还是遇到了许多的问题，像往webpack5的变更，Vue的环境变量文件——2023/11/1

往webpack5的变更

在vue.config.js中配置devServer时，我遇到的问题，它devServer.before用不了了。后面了解到 webpack5之前使用的是devServer.before来配置mock服务, 到了webpack5则改为devServer.setupMiddlewares。

const { defineConfig } = require('@vue/cli-service')
//可以使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示
module.exports = defineConfig({
  transpileDependencies: true,//项目中的依赖将会被转译（即通过 Babel 进行语法转换），以确保它们在不同的环境下都能够正常工作。
  devServer: {
    //webpack5之前使用的是devServer.before来配置mock服务, 到了webpack5则改为devServer.setupMiddlewares
    // before: require('./mock/index.js'), // 引入 mock/index.js
    setupMiddlewares: require('./mock/index.js')
} 
})

mock实现函数，webpack5的配置函数

const Mock = require('mockjs'); // 导入依赖模块

// 返回一个函数
module.exports = function(middlewares, devServer){
    if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }
     if(process.env.VUE_APP_MOCK=='true'){
        devServer.app.get('/user/userinfo', (requset, response) => {
            // 设置要返回的数据
            let json = {
             id: "@id()",                    // 得到随机的id
             username: "@cname()",           // 随机生成中文名字
             date: "@date()",                // 随机生成日期
             avatar: "@image('200x200','red','#fff','avatar')",  // 生成图片                  
             description: "@paragraph()",    // 描述
             ip: "@ip()",                    // ip地址
             email: "@email()",              // email
         }
         response.json(Mock.mock(json));
       });
     }
      return middlewares;
}

Vue的环境变量文件

在项目的根目录中的.env.development文件

# 属性名必须以 VUE_APP_ 头，比如 VUE_APP_XXX，否则不符合命名规则的属性名环境变量无法被 Vue 加载。
# .env 全局默认配置文件，不论什么环境都会加载合并；
#.env.development开发环境下的配置文件；
#.env.production 生产环境下的配置文件；
# 环境变量的使用：process.env.VUE_APP_MOCK
VUE_APP_MOCK=true

以上有不明白的可以参考上面给的那个链接，也欢迎在评论中留言