导入.vue文件时出现MIME type错误（Vue+Electron Forge环境）

你遇到的错误根源有两个：

1. Electron的Chromium内核直接加载.vue文件时，会将其识别为text/plain类型，不符合ES模块要求的合法JS MIME类型规范；
2. Vue单文件组件（.vue）包含模板、脚本、样式混合内容，必须经过编译才能被运行环境识别，无法直接导入使用。

针对Electron Forge的不同模板，给出对应解决方案：

方案一：使用Webpack模板的项目 #

如果你的项目是通过electron-forge init my-app --template=webpack创建的，按以下步骤配置：

1. 安装Vue及相关依赖：

npm install vue vue-loader vue-template-compiler css-loader vue-style-loader

2. 修改渲染进程的Webpack配置文件（通常是webpack.renderer.config.js）：

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  // 保留原有配置，新增以下内容
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    extensions: ['.vue', '.js']
  }
};

3. 调整HTML文件，引入Webpack打包后的渲染进程入口脚本（默认是./renderer.js），移除原来的内联module脚本：

<div class="MAIN"></div>
<script src="./renderer.js"></script>

4. 在renderer.js中正常导入组件：

import { createApp } from 'vue';
import MyComponent from './library.vue';

createApp(MyComponent).mount('.MAIN');

方案二：使用Vite模板的项目 #

如果你的项目是通过electron-forge init my-app --template=vite创建的，配置更简单：

1. 安装Vue及Vite插件：

npm install vue @vitejs/plugin-vue

2. 修改vite.config.js，添加Vue插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});

3. 调整HTML文件，引入Vite的模块入口脚本：

<div class="MAIN"></div>
<script type="module" src="/src/renderer.js"></script>

4. 在src/renderer.js中导入组件：

import { createApp } from 'vue';
import MyComponent from './library.vue';

createApp(MyComponent).mount('.MAIN');

注意：不要尝试直接在HTML的type="module"脚本中导入.vue文件，所有单文件组件必须经过构建工具编译后才能被使用。

内容的提问来源于stack exchange，提问作者Gee-on-woo