[记录] [email protected]项目接入vite@2示例

• 项目github地址
  github
  https://github.com/13168335674/vue2-vite-plugin-test

接入步骤

1. 先通过@vue/cli 创建一个vue2+ts的初始项目

2. 引入 vite
   yarn add vite vite-plugin-vue2

3. 修改 package.json

   "scripts": {
     "serve-vite": "vite",
   }
   

4. 添加 vite html template

• 引入 vite-plugin-html

  yarn add vite-plugin-html

• 配置 vite.config.js

• 复制 /public/index.html 到 /index.html

• 注入 script

  
  
  <% if (env.TOOL_NAME === 'vite') { %>
  
  <% } %>
  

4. 配置 alias

• 配置 vite.config.js

  export default defineConfig({
    resolve: {
      alias: [
        {
          find: "@",
          replacement: resolvePath("src"),
        },
      ],
    },
  });
  

• use

  import Home from "@/views/Home.vue";

5. 配置 scss 变量注入

• 配置 vite.config.js

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '@/styles/variables.scss';`,
      },
    },
  },
  

开发/打包速度对比

• 开发环境

  
  
  vue/cli-dev
  
  
  vite/dev

• 打包环境

  
  
  vue/cli-build
  
  
  vite/build