时间戳

首页 > 解决方案 > 为什么不能使用 VueJS 在 vue.config.js 文件中使用 ES 导入？

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

问题描述

为什么ES 导入不能在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 错误：

要求语句不是导入语句的一部分。eslint（@typescript-eslint/no-var-requires）

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

标签： javascripttypescriptvue.jswebpackvue-cli

解决方案

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

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

require('@babel/register');

然后需要另一个文件，例如基于 ESM 的代码所在的 vue.config.mjs。

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

推荐阅读