vue项目启动vue.config.js报错:options should be one of these:object { resourceRegExp, contextRegExp? }

最近遇到一个问题vue项目在同事那里能正常运行,到我这里就报错:

ERROR  Error loading D:\ideaProject\saas\basic-crm-vue\vue.config.js:
 ERROR  ValidationError: Invalid options object. Ignore Plugin has been initialized using an options object that does not match the API schema.
 - options should be one of these:
   object { resourceRegExp, contextRegExp? } | object { checkResource }
   Details:
    * options misses the property 'resourceRegExp'. Should be:
      RegExp
      -> A RegExp to test the request against.
    * options misses the property 'checkResource'. Should be:
      function
      -> A filter function for resource and context.

最后在网上各种扒拉,各种找,终于找到了原因,猜测的原因可能是版本问题,写法不一样导致,记录如下:

同事的vue.config.js的写法:

// vue.config.js
const vueConfig = {
  configureWebpack: {
    name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    // webpack plugins
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ],
    // if prod, add externals
    // externals: isProd ? assetsCDN.externals : {}
  },

  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))

    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })

    // if prod is on
    // assets require on cdn
    // if (isProd) {
    //   config.plugin('html').tap(args => {
    //     args[0].cdn = assetsCDN
    //     return args
    //   })
    // }
  },


  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // less vars,customize ant design theme

          // 'primary-color': '#F5222D',
          // 'link-color': '#F5222D',
          'border-radius-base': '2px'
        },
        // DO NOT REMOVE THIS LINE
        javascriptEnabled: true
      }
    }
  },

  devServer: {
    // development server port 8000
    port
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    // proxy: {
    //   '/api': {
    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
    //     ws: false,
    //     changeOrigin: true
    //   }
    // }
  },

  // disable source map in production
  productionSourceMap: false,
  lintOnSave: false,
  // babel-loader no-ignore node_modules/*
  transpileDependencies: []
}

错就错在这个plugins的写法,同事的写法是:

plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ],

将这段代码改成:

plugins: [ 

new webpack.IgnorePlugin(
        {
          resourceRegExp:/^\.\/locale$/,
          contextRegExp:  /moment$/,
        }

)

],

这样就好了,就可以正常运行了,具体是哪个东西版本不一致引起的,没有找到,有大神的话,请解惑,谢谢

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 这个误通常是因为你的Vue项目中使用了ES6的模块语法,但是Node.js版本较低不支持该语法。解决方案如下: 1. 升级Node.js版本 升级Node.js版本到8.5.0及以上版本,可以支持ES6的模块语法。 2. 使用babel转换 在项目中使用babel转换ES6的模块语法,具体步骤如下: - 安装babel相关的依赖: ``` npm install --save-dev @babel/core @babel/cli @babel/preset-env ``` - 在项目根目录下新建babel.config.js文件,添加以下内容: ``` module.exports = { presets: [ '@babel/preset-env' ] } ``` - 在package.json文件中添加如下命令: ``` "scripts": { "build": "babel src -d lib" } ``` - 运行以下命令进行转换: ``` npm run build ``` 3. 修改代码 如果是在Vue项目中出现该误,可以将相关的import语句改为require语句,例如: ``` // import import Vue from 'vue' // 替换为 const Vue = require('vue') ``` 希望以上任一方法可以帮助到你解决问题。 ### 回答2: 该是因为在vue.config.js文件中使用了import语句,而import语句只能在模块中使用,不能在普通的脚本文件中使用。 在vue.config.js文件中,我们可以使用CommonJS的module.exports来导出一个对象,该对象包含了webpack的配置选项。 如果你需要在vue.config.js中使用import语句来引入模块,你需要将该文件转换为一个模块,可以通过安装babel和相应的插件来实现。 首先,在项目根目录下创建一个.babelrc文件,并配置以下内容: { "presets": ["@babel/preset-env"] } 然后,安装相关的依赖包: npm install -D @babel/core @babel/preset-env babel-loader 接下来,在vue.config.js文件的开头导入转换器: require('@babel/register'); 然后,你就可以在vue.config.js中使用import语句,引入需要的模块。 请注意,使用import语句需要使用babel进行转换,因此在使用import语句之前,需要确保项目中已经安装了相应的依赖包,并正确配置了相关的转换器。 ### 回答3: 这个误是因为在 vue.config.js 文件中使用了 import 语句,而 import 语句只能在模块中使用。 vue.config.js 文件是一个普通的 JavaScript 文件,不是一个模块,所以不能使用 import 语句。import 语句用于引入其他 JavaScript 模块中的内容。 要解决这个问题,可以使用 require 语句代替 import 语句。 例如,如果想引入一个名为 axios 的模块,可以将 import axios from 'axios' 语句替换为 const axios = require('axios')。 以下是一个示例的 vue.config.js 文件,其中使用了 require 语句引入了 axios 模块: ```javascript const webpack = require('webpack') const axios = require('axios') module.exports = { // 其他配置项 configureWebpack: { plugins: [ // 其他插件 new webpack.ProvidePlugin({ axios: 'axios' }) ] } } ``` 这样就可以解决 SyntaxError: Cannot use import statement outside a module 误了。同时,要确保安装了需要引入的模块,可以通过 npm install axios 命令安装 axios 模块。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值