接入步驟
先通過@vue/cli 創(chuàng)建一個vue2+ts的初始項目
引入 vite
yarn add vite vite-plugin-vue2-
修改 package.json
"scripts": { "serve-vite": "vite", } 添加 vite html template
-
引入 vite-plugin-html
yarn add vite-plugin-html 配置
vite.config.js復制
/public/index.html到/index.html-
注入 script
<div id="app"></div> <!-- built files will be auto injected --> <% if (env.TOOL_NAME === 'vite') { %> <script type="module" src="/src/main.ts"></script> <% } %>
- 配置 alias
-
配置 vite.config.js
export default defineConfig({ resolve: { alias: [ { find: "@", replacement: resolvePath("src"), }, ], }, }); -
use
import Home from "@/views/Home.vue";
- 配置 scss 變量注入
-
配置 vite.config.js
css: { preprocessorOptions: { scss: { additionalData: `@import '@/styles/variables.scss';`, }, }, },
開發(fā)/打包速度對比
-
開發(fā)環(huán)境
vue/cli-dev
vite/dev -
打包環(huán)境
vue/cli-build
vite/build
