不使用vue-cli-service构建Vue3项目报Cannot read properties of undefined错误

问题根因 #

你遇到的Cannot read properties of undefined (reading '_c')报错核心原因是依赖版本不匹配：vue-loader@15.x 是专门适配 Vue2 的版本，无法正确编译 Vue3 的 SFC 单文件组件，_c 是 Vue2 内部的渲染方法，Vue3 不存在该API，因此调用时直接报undefined错误。

方案1：原生Webpack配置修复 #

第一步：更新依赖

执行以下命令替换适配Vue3的loader版本：

# 卸载旧版vue-loader
npm uninstall vue-loader@15
# 安装适配Vue3的版本
npm install vue-loader@16 @vue/compiler-sfc@latest --save-dev

第二步：修复webpack.config.js配置

1. 补全scss编译规则，你当前配置遗漏了sass-loader会导致样式编译失败：

{
  test: /\.s(c|a)ss$/,
  use: ['vue-style-loader', 'css-loader', 'sass-loader']
},

2. 扩展entry字段即可支持多项目打包，自动生成对应名称的单JS文件：

entry: {
  project1: `./src/project1/main.ts`,
  project2: `./src/project2/main.ts`
},

修改完成后执行npm run test即可在dist目录生成无冗余文件的单个项目JS。

方案2：使用vue-cli-service实现需求（更省心） #

不需要自己维护完整webpack配置，用vue-cli也能满足多项目打包、单JS输出、无冗余文件的要求：

1. 项目根目录新建vue.config.js，配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  productionSourceMap: false, // 关闭sourcemap减少体积
  filenameHashing: false, // 关闭文件名哈希，固定输出名称
  css: {
    extract: false, // 把样式直接打包进JS，不单独生成css文件
  },
  configureWebpack: {
    entry: {
      project1: './src/project1/main.ts',
      project2: './src/project2/main.ts'
    },
    output: {
      filename: '[name].js',
      path: __dirname + '/dist'
    },
    optimization: {
      splitChunks: false, // 关闭代码拆分，不生成公共chunk
      runtimeChunk: false // 关闭运行时chunk，保证每个入口对应单个完整JS
    }
  },
  // 删除默认生成的html、favicon等冗余文件
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
})

2. 执行npm run build即可在dist目录生成仅包含project1.js、project2.js的产物，可直接给Razor页面引用。

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