Vue3 パッケージング ビルドが webpack から vite に変更されました
序文
新しく作成した vue プロジェクトを作成し、webpack でパッケージ化します.vite パッケージに変更する場合は、変更内容を見てみましょう.具体的な操作内容は次のとおりです. （提出記録に収録、時間が長い、抜けがあるかもしれません）
パッケージ.json
- スクリプトを実行
webpack
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" } vite "scripts": { "build": "vue-tsc --noEmit && vite build", "dev": "vite", "preview": "vite preview" }
- vite には多くの組み込みの依存関係があり、手動でダウンロードする必要がないため、開発の依存関係が大幅に削減されます。
webpack
"devDependencies": { "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-babel" : "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli- plugin-typescript」: 「~5.0.0」、「@vue/cli-service」: 「~5.0.0」、「@vue/eslint-config-typescript」: 「^9.1.0」、「babel-plugin」 -import”: “^1.13.5”, “eslint”: “^7.32.0”, “eslint-plugin-vue”: “^8.0.3”, “postcss-pxtorem”: “^6.0.0”, “sass”: “^1.32.7”, “sass-loader”: “^12.0.0”, “typescript”: “~4.5.5”, “unplugin-vue-components”: “^0.20.1”, 「unplugin-vue-define-options」: 「^0.6.2」
}
vite
"devDependencies": { "@types/node": "^12.20.24", "@vitejs/plugin-vue": "^3.0.3", "rollup-plugin-copy": "^3.4.0 」、「typescript」：「^4.6.4」、「unplugin-vue-components」：「^0.22.4」、「vite」：「^3.0.7」、「vue-tsc」：「^0.39.5」 」}
- 完全版は以下の通り
{
"name": "min-demo",
"version": "0.0.1",
"type": "module",
"scripts": {
"build": "vue-tsc --noEmit && vite build",
"dev": "vite",
"preview": "vite preview"
},
"dependencies": {
"@tinymce/tinymce-vue": "^4.0.7",
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"copy-webpack-plugin": "^11.0.0",
"echarts": "^5.3.3",
"element-plus": "^2.2.14",
"min-comp": "^0.0.4",
"mockjs": "^1.1.0",
"particles.vue3": "^2.2.3",
"pinia": "^2.0.20",
"prismjs": "^1.28.0",
"sass": "^1.54.5",
"sass-loader": "^13.0.2",
"three": "^0.143.0",
"tsparticles": "^2.2.3",
"vant": "^3.6.0",
"vite-plugin-dts": "^1.4.1",
"vite-plugin-md": "^0.20.2",
"vue": "^3.2.37",
"vue-router": "^4.1.3"
},
"devDependencies": {
"@types/node": "^12.20.24",
"@vitejs/plugin-vue": "^3.0.3",
"rollup-plugin-copy": "^3.4.0",
"typescript": "^4.6.4",
"unplugin-vue-components": "^0.22.4",
"vite": "^3.0.7",
"vue-tsc": "^0.39.5"
}
}
index.html
- index.html の場所を src と同じレベルに移動する必要があります
- main.ts を手動で導入する必要がある
<script type="module" src="/src/main.ts"></script> - BASE_URL は webpack の組み込みグローバル環境変数であるため、vite は使用できず、vite の環境変数属性は import.meta.env に格納されます。
vue.config.jsファイルを削除し、vite.config.ts を作成します。
//vite.config.ts
import {
defineConfig } from "vite";
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import {
VantResolver } from 'unplugin-vue-components/resolvers';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
})
require は使用できません。require は webpack に付属しています。vite でファイルをインポートするには import を使用します。
//webpack
require("../mock");
//vite
import "../mock/index";
ファイルの一括インポート
//webpack
const files = require.context('.', true, /\.js$/);
//vite
const files = import.meta.glob("./*.js");
vite はファイルの動的読み込みをサポートしていません。解決策はコメントを追加することです
//webpack
component: () => import(`@/views/${
folderUrl}/LayoutView.vue`)
//vite
component: () => import(/* @vite-ignore */`@/views/${
folderUrl}/LayoutView.vue`)
vite-env.d.ts を追加
declare module '*.vue' {
import type {
DefineComponent } from 'vue'
const component: DefineComponent<{
}, {
}, any>
export default component
}
tsconfig.node.json を追加
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}