createapp.dev 是一個我在練習或研究時很喜歡使用的一個網站，它可以幫助我快速產出一個具有 Webpack 功能的小型專案，因為它的客製化選項非常多，使用完畢後也可以直接刪除節省硬碟空間。
前陣子在 Vue 3.0 變成 Vue 的預設版本後，如果直接下載基於 Vue 的 Webpack 小型專案，在 npm install 後會沒辦法直接透過 script 設定好的 build-prod 指令去打包：
我們看到第一個問題是：Cannot find module ‘vue-loader/lib/plugin’。這時候我們到 Require stack 指向的第一個檔案 webpack.config.js 去查看的話，會發現是：
const VueLoaderPlugin = require('vue-loader/lib/plugin');這一行出了問題，到 VueLoaderPlugin 官網去查詢：
再對照設定檔會發現引入方式不同，我們將引入方式改為官方文件的做法：
const { VueLoaderPlugin } = require("vue-loader");這時候如果再重跑 npm run build-prod，會發現又報了另一個錯誤：
接著我們看看 App.vue：
如果有裝 Vetur 並將滑鼠移到 extend 文字上，會顯示：
Property ‘extend’ does not exist on type ‘typeof import(vue在專案中的路徑)
在網路上下對應的關鍵字的話，會發現 Vue 3 已經不再支持這樣的寫法。此外，由於專案中沒有額外安裝 TypeScript，因此我們也將 lang=”ts” 移除：
<template>
<div>
<h1>
{{ name }}
</h1>
</div>
</template><script>
export default {
data: function () {
return {
name: "Hello World!",
};
},
};
</script>
這時候如果再打包，會發現沒有錯誤，但出現了一個 warning：
但 bundle.js 有成功被產在 dist/ 資料夾下，但實際開啟 dist/index.html 會發現依然沒有成功掛載：
實際改用 npm run build-dev ，錯誤訊息變成了：
如果把關鍵字丟到 Google，會發現有人碰到類似的問題，問題在於 index.js 中依然使用了 Vue2 的方式去掛載組件。將掛載方式改為 Vue3：
import { createApp } from "vue";
import App from "./App";createApp(App).mount("#app");
便成功解決了問題。整理後的檔案：
// index.js
import { createApp } from "vue";
import App from "./App";createApp(App).mount("#app");// src/App.vue
<template>
<div>
<h1>
{{ name }}
</h1>
</div>
</template><script>
export default {
data: function () {
return {
name: "Hello World!",
};
},
};
</script>// webpack.config.js
const webpack = require("webpack");
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
resolve: {
extensions: [".js", ".vue"],
},
plugins: [new VueLoaderPlugin()],
};module.exports = config;
基於這些問題推測是 vue 在版本被替換後，createapp.dev 沒有做出對應的修改。
雖然 Fork 也 clone 了作者的專案並調整好發了 PR，不過這個專案看起來已經幾個月沒更新，且近期的 PR（包括我的）都在 deploy/netlify 的階段就失敗了，會不會收到回饋或被採納就不得而知了。不過這算是我第一次在實務上調整 next.js 的專案，也算是一個不錯的經驗。
以上就是針對 createapp.dev 無法 build 基於 Vue 專案問題解決方式的筆記，希望可以幫助到也有使用這個工具的人。如果內文有任何錯誤，煩請不吝指出，謝謝大家。
References:
https://blog.csdn.net/qq_39953537/article/details/110437554
https://vuejs.org/guide/typescript/overview.html#definecomponent
