Vue-element-admin: 使用 mock-server.js 的时候 require('@babel/register') 不起作用

[calanchenlins]

问题描述：自己通过 VueCLI 搭建了项目，想使用 vue-admin-template 的 mock-server.js代码 ，引入之后无法打包，怀疑是 require('@babel/register') 不起作用

项目搭建环境: Vue CLI 默认配置

配置文件: vue.config.js

module.exports = {
  devServer: {
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://127.0.0.1:${4358}/mock',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  }
}

mock-server.js部分代码

function registerRoutes(app) {
  // const mocks = []
  const { default: mocks } = require('./index.js')
}

module.exports = app => {
  // es6 polyfill
  require('@babel/register')

  registerRoutes(app)
}

./mock/index.js 部分代码

import procRoute from './procRoute'
import Mock from 'mockjs'

const mocks = [
  ...procRoute
]

// for mock server
const responseFake = (url, type, respond) => {
  return {
    url: new RegExp(`/mock${url}`),
    type: type || 'get',
    response(req, res) {
      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
    }
  }
}
export default mocks.map(route => {
  return responseFake(route.url, route.type, route.response)
})

错误描述：

1、在require('./index.js') 的时候报错

import "core-js/modules/es6.regexp.constructor";
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string

2、修改babel.config.js 的useBuiltIns配置

module.exports = {
  presets: [
    ['@vue/app', { useBuiltIns: 'entry' }]
  ]
}

3、再次报错：使用import语法的时候的时候报错

import procRoute from './procRoute';
       ^^^^^^^^^
SyntaxError: Unexpected identifier

4、猜测可能是由于 require('@babel/register') 不起作用，将所有依赖的文件全部改为commonJs的语法，再次报错

 mocks is not iterable
    at registerRoutes (G:\Test\appV2\mock\mock-server.js:11:22)

5、在 mock-server.js中

将  const { default: mocks } = require('./index.js')
修改为 const mocks = require('./index.js')

最后跑了起来。请问一下，我是不是哪里配置没配好，导致require('@babel/register') 不起作用 。
而且 vue-admin-template 也没有配置{ useBuiltIns: 'entry' }，找了很久都没找到哪里不对，希望有人能够解答一下。
最后附上包信息

package.json

{
  "name": "vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@antv/g6": "^3.1.0",
    "axios": "^0.19.0",
    "core-js": "^2.6.10",
    "element-ui": "^2.12.0",
    "lodash": "^4.17.15",
    "numericjs": "^1.2.6",
    "qs": "^6.9.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/register": "^7.6.2",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.9.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "mockjs": "^1.0.1-beta3",
    "vue-template-compiler": "^2.6.10"
  }
}

[tgly307]

项目根目录创建
.env.development
加上配置

VUE_CLI_BABEL_TRANSPILE_MODULES = true

我也是在自己的项目中引入mock-server时遇到了同样的问题，搜了一下发现是这个问题。

[calanchenlins]

项目根目录创建
.env.development
加上配置

VUE_CLI_BABEL_TRANSPILE_MODULES = true

我也是在自己的项目中引入mock-server时遇到了同样的问题，搜了一下发现是这个问题。

非常感谢,加上这句配置就正常工作了