Vue项目引入resource-bundle包报错：Cannot assign to read only property 'exports'

这个错误本质上是CommonJS模块语法和ES模块语法混用导致的冲突，Vue项目（不管是Vue CLI还是Vite搭建的）默认采用ES模块规范（用import/export），而resource-bundle包的核心文件可能只支持CommonJS（用module.exports），两种规范在同一个模块上下文里就会触发这个只读属性的报错。

下面给你几个可行的解决思路：

• 检查并调整引入方式
  如果你现在在main.js里用的是ES模块的引入方式：

  import ResourceBundle from 'resource-bundle'
  

  可以临时改成CommonJS的require试试：

  const ResourceBundle = require('resource-bundle')
  

  不过这只是临时测试方案，Vue项目长期用require不太推荐，最好还是看包的官方文档，确认它是否支持ES模块环境。

• 确认包的兼容性
  去看看resource-bundle的package.json文件（可以在项目的node_modules/resource-bundle目录里找到），检查有没有"type": "module"字段，或者有没有"module"字段指向ES模块版本的入口文件。如果这两个都没有，说明这个包是为Node.js环境设计的，没有做浏览器端ES模块的适配，这就是冲突的根源。

• 通过构建工具配置兼容

  • 如果你用的是Vue CLI（基于Webpack）：
    在vue.config.js里添加Webpack规则，用Babel把这个包转成ES模块：

    module.exports = {
      configureWebpack: {
        module: {
          rules: [
            {
              test: /resource-bundle\/index\.js$/,
              use: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          ]
        }
      }
    }
    

    记得先安装依赖：npm install babel-loader @babel/preset-env --save-dev

  • 如果你用的是Vite：
    可以先尝试把包加入预构建列表，在vite.config.js里配置：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue()],
      optimizeDeps: {
        include: ['resource-bundle']
      }
    })
    

    如果预构建没用，就用@rollup/plugin-commonjs来转换CommonJS模块：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import commonjs from '@rollup/plugin-commonjs'
    
    export default defineConfig({
      plugins: [vue(), commonjs()]
    })
    

    同样需要先安装插件：npm install @rollup/plugin-commonjs --save-dev

• 考虑替代方案
  如果上面的方法都没法解决，说明这个包和浏览器端Vue项目的兼容性实在太差。可以换成专门为Vue设计的资源/国际化管理工具，比如vue-i18n，它完全适配Vue的模块环境，功能也更完善。

内容的提问来源于stack exchange，提问作者HoseinPanahi