[记录] vue@2.6项目接入vite@2示例

接入步骤

  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

    <div id="app"></div>
<!-- built files will be auto injected -->
<% if (env.TOOL_NAME === 'vite') { %>
<script type="module" src="/src/main.ts"></script>
<% } %>
  1. 配置 alias

  • 配置 vite.config.js

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

  • use

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

  1. 配置 scss 变量注入

  • 配置 vite.config.js

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

开发/打包速度对比

  • 开发环境


    vue/cli-dev

    vite/dev

  • 打包环境


    vue/cli-build

    vite/build
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容