Question

ES imports为什么不在vue.config.js文件中工作？

例如：

import * as path from 'path';
import * as pjson from './package.json';

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, '/src'), // Alias @ to /src folder for ES/TS imports
      },
    },
  },
  pwa: {
    name: pjson.title,
    assetsVersion: pjson.version,
  },
};

运行npm run lint命令（使用vue-cli-service）后出错：

\vue.config.js:1
import * as path from 'path';

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:6

import 'path';也不起作用（也尝试了其他语法变体）：

import 'path';
       ^^^^^^

SyntaxError: Unexpected string

我尝试从const path = require('path');语法重构的原因是为了避免ESLint插件升级后出现此新的linter错误：

Require语句不属于导入声明。 eslint（@ typescript-eslint / no-var-requires）

但是似乎我仍然需要将此附加到文件顶部：/* eslint-disable @typescript-eslint/no-var-requires */

Answer 1

文件vue.config.js由@ vue / cli-shared-utils / lib / module.js通过CommonJS require加载。因此，它也希望vue.config.js也是CommonJS。

您可以采用一些方案来克服此内置限制，例如使用vue.config.js来

require('@babel/register');

然后需要另一个文件，例如vue.config.mjs，您的基于ESM的代码将驻留在其中。

但是鉴于这只是一个通常没有很多代码的配置文件，所以最好不要去市政厅，而要使用CommonJS。

为什么不能在VueJS的vue.config.js文件中使用ES导入？

1 个答案: