Vue3项目启动报Module parse failed错误 部署Heroku失败如何解决

核心根因 #

• style.css.map是CSS的source map映射文件，不属于需要被webpack加载器解析的业务代码，触发加载报错的常见原因是代码中存在误引入该map文件的语句，或是Vue CLI生产构建配置异常生成了多余的map文件被模块系统识别。
• 本地运行正常但Heroku部署失败是因为Heroku默认运行在生产环境，安装依赖时会自动跳过devDependencies下的包，且生产构建的配置和本地开发环境存在差异。

具体操作步骤 #

1. 全局搜索项目代码，查找所有引入style.css.map的语句，删除该类错误引入，替换为正确的样式文件引入（如style.css或对应的sass/scss源文件）。如果该map文件无实际使用需求，也可直接删除./src/style/style.css.map文件快速解决问题。

2. 在项目根目录新建vue.config.js配置文件，写入以下内容调整webpack规则，避免map文件被错误加载：

module.exports = {
  // 生产环境关闭source map生成，减小产物体积同时避免多余map文件报错
  productionSourceMap: process.env.NODE_ENV !== 'production',
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.css\.map$/,
          use: 'null-loader'
        }
      ]
    }
  }
}

执行以下命令安装所需依赖：
yarn add null-loader --dev

3. 处理Heroku依赖安装规则：
   你的sass、sass-loader都存放在devDependencies中，生产构建需要用到这两个依赖，可选择以下两种方案中的任意一种：

• 方案一：将sass和sass-loader从devDependencies移动到dependencies中
• 方案二：执行Heroku命令修改环境变量，允许安装所有依赖：heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false

4. 提交所有修改后的代码到Heroku，重新触发构建即可。

内容的提问来源于stack exchange，提问作者Josip Marić