从 Vue2 到 Vue3 迁移时如何解决“Unexpected token 'export'”错误？

在 Vue2 到 Vue3 迁移中解决“Unexpected token 'export'”错误

问题

从 Vue2 迁移到 Vue3 时，你可能在运行应用程序时遇到一个错误，即 SyntaxError: Unexpected token 'export'。此错误出现在 node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js 文件中。

原因

该错误是由对 export 的不兼容使用引起的，该关键字在 Vue3 中已弃用。

解决方案

有两种方法可以解决此问题：

修改 node_modules 文件

注意： 此方法可能不适用于所有情况，因为它涉及修改外部模块。

1. 在 node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js 文件中，将 export default null 替换为 module.exports = null。
2. 重新构建应用程序。

在 vue.config.js 中添加 Externals

1. 在你的项目目录中创建一个 vue.config.js 文件（如果不存在的话）。
2. 在文件中添加以下代码：

module.exports = {
  chainWebpack: config => {
    config.externals([
      {
        '@soda/get-current-script': 'commonjs2 @soda/get-current-script',
        'vue': 'commonjs2 vue',
      },
    ])
  },
}

3. 重新构建应用程序。

其他建议

• 确保使用最新版本的 Vue CLI。
• 尝试清理 node_modules 目录并重新安装依赖项。
• 如果问题仍然存在，请在 GitHub 上提交问题或在 Vue 社区论坛上寻求帮助。

结论

解决 "Unexpected token 'export'" 错误对于从 Vue2 成功迁移到 Vue3 至关重要。通过修改 node_modules 文件或在 vue.config.js 中添加 externals，你可以解决此问题并顺利迁移你的应用程序。

常见问题解答

Q：为什么会出现此错误？
A：此错误是由对在 Vue3 中已弃用的 export 关键字的不兼容使用引起的。

Q：如何修改 node_modules 文件？
A：编辑 node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js 文件并替换 export default null 为 module.exports = null。

Q：如何添加 externals？
A：在你的 vue.config.js 文件中添加 chainWebpack 配置并添加 externals 数组。

Q：我需要修改哪些其他模块？
A：你可能还需要根据需要将其他模块添加到 externals 数组中。

Q：如果问题仍然存在，我该怎么办？
A：在 GitHub 上提交问题或在 Vue 社区论坛上寻求帮助。