欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue Cli項目重構(gòu)為Vite的方法步驟

 更新時間：2023年04月20日 09:05:11   作者：AntPro  
本文主要介紹了Vue Cli項目重構(gòu)為Vite的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

我們知道 VueCli 使用的是 webpack 打包工具，而 Vite 是基于 ESM 的打包工具，所以我們可以使用 Vite 來替換 VueCli，來提升我們的開發(fā)體驗。

更新依賴與 package.json

我們先將項目中的 VueCli 相關(guān)依賴刪除，然后安裝 Vite 相關(guān)依賴。

::: tip 包管理工具我們使用 pnpm，如果你使用的是 npm 或 yarn，請自行替換。 :::

  • 刪除 VueCli 相關(guān)依賴
pnpm remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-service
  • 安裝 Vite 相關(guān)依賴

::: warning 注意 如果你用的是 vue2.6, 請安裝 vite-plugin-vue2, 并且不需要 jsx 支持 :::

pnpm add -D vite @vitejs/plugin-vue @vitejs/plugin-vue2 @vitejs/plugin-vue2-jsx
  • 同時我們可以移除 babel 相關(guān)依賴
pnpm remove -D babel-plugin-dynamic-import-node babel-eslint
  • 修改 scripts

修改 package.json 中的 scripts

{
  "scripts": {
    "dev": "vite --host",
    "build:prod": "vite build",
    "build:stage": "vite build --mode staging"
  }
}

配置 Vite

  • 創(chuàng)建 vite.config.js，并添加基本配置
import { defineConfig, loadEnv } from 'vite';
// 如果使用的是 vue2.6, 請使用 vite-plugin-vue2
// import { createVuePlugin as vue } from 'vite-plugin-vue2';
import vue from '@vitejs/plugin-vue2';
import { resolve } from 'path';
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
import { dataToEsm } from '@rollup/pluginutils';
import vueJsx from '@vitejs/plugin-vue2-jsx';

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };

  return defineConfig({
    plugins: [
      // vue2.6
      // vue({ jsx: true }),
      // vue2.7
      vue(),
      vueJsx(),
    ],
    server: {
      port: 75,
      proxy: {
        [process.env.VITE_APP_BASE_API]: {
          target: process.env.VITE_APP_PROXY_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(new RegExp(`^${process.env.VITE_APP_BASE_API}`), ''),
        },
      },
    },
    resolve: {
      alias: {
        '@': resolve('src'),
      },
      extensions: ['.js', '.vue', '.json'],
    },
  });
};
  • 如果你的項目中使用了 node 的一些模塊，需要在 resolve.alias 中添加對應(yīng)的 polyfill

::: tip 提示 需要添加 rollup-plugin-node-polyfills 依賴 :::

defineConfig({
  // ...
  resolve: {
    alias: {
      '@': resolve('src'),
      // 如果你的項目中使用了node的一些模塊，需要在這里添加對應(yīng)的polyfill，如沒有配置.js的extensions，需要在末尾添加.js
      path: 'rollup-plugin-node-polyfills/polyfills/path',
  }
})
  • 如果你的項目需要使用 build 的配置，可以參考如下配置
defineConfig({
  // ...
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash][extname]',
        // 分離依賴包
        manualChunks: {
          vue: ['vue'],
          echarts: ['echarts'],
          'element-ui': ['element-ui'],
        },
      },
    },
  },
});
  • 移除 vue.config.js
  • 若你的項目中使用了 jsx，請將 '.js' 文件修改為 '.jsx'

全局替換 Env 變量與 require

  • 將所有的 process.env 替換為 import.meta.env，如：
// 替換前
const uploadFileUrl = process.env.VUE_APP_BASE_API + '/upload';
// 替換后
const uploadFileUrl = import.meta.env.VITE_APP_BASE_API + '/upload';

::: tip 參考正則 process\.env\.VUE_APP_ replace import.meta.env.VITE_APP_ :::

::: danger 注意 請勿將 vite.config.js 中的 process.env 替換為 import.meta.env :::

  • 將所有直接導(dǎo)入的 require 替換為 import，如：
// 替換前
const { version } = require('../../package.json');
// 替換后
import { version } from '../../package.json';

::: tip 參考正則 const\s+\{(.+?)\}\s+=\s+require\((.+?)\); replace import {$1} from $2; :::

  • 移除動態(tài)導(dǎo)入的 require.context，如：
// 替換前
const svgIcons = require.context('@/assets/icons/svg', false, /\.vue$/);
// 替換后
const svgIcons = import.meta.globEager('@/assets/icons/svg');
  • 動態(tài)導(dǎo)入的 Vue 路由組件需要調(diào)整為 import()，如：
// 替換前
route.component = () => require([`@/views/${route.component}`]);
// 替換后

// 動態(tài)導(dǎo)入
const views = import.meta.glob('@/views/**/**.vue');
route.component = views[`@/views/${route.component}.vue`];

// 確定文件路徑的動態(tài)導(dǎo)入
// 替換前
route.component = () => require('@/views/index/index');
// 替換后
route.component = () => import('@/views/index/index.vue');

調(diào)整 ESLint 配置

移除 babel-eslint parser

// .eslintrc.js
module.exports = {
  // ...
  // 移除
  // parser: 'babel-eslint',
  // ...
};

調(diào)整 index.html

移動 public/index.html 至 index.html，并添加 JavaScript 模塊 的引入方式

<!-- ... -->
<script type="module" src="/src/main.js"></script>
<!-- ... -->

::: tip 提示 <script>標簽一般添加在 </body> 前 :::

SVG 支持

  • 安裝依賴
pnpm add -D vite-plugin-svg-icons
  • 修改 vite.config.js，參考配置如下：
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

defineConfig({
  // ...
  plugins: [
    // ...
    createSvgIconsPlugin({
      // 圖標文件夾中，所有的svg文件將被轉(zhuǎn)換為svg精靈
      iconDirs: [resolve(process.cwd(), 'src/assets/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
});
  • 添加虛擬模塊至入口文件，如：
// src/main.js
// ...
import 'virtual:svg-icons-register';
// ...
  • 添加 SvgIcon/index.vue 組件
<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" rel="external nofollow"  />
  </svg>
</template>

<script>
import { isExternal } from '@/utils/validate';

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass);
    },
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className;
      } else {
        return 'svg-icon';
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
      };
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

總結(jié)

至此，我們已經(jīng)完成了 vue-cli 項目的遷移，接下來我們可以使用 vite 的各種優(yōu)勢了。

如果遇到構(gòu)建產(chǎn)物無法正常使用的情況，請在你的動態(tài)路由中導(dǎo)入 import.meta.glob

參考

到此這篇關(guān)于Vue Cli項目重構(gòu)為Vite的方法步驟的文章就介紹到這了,更多相關(guān)Vue Cli項目重構(gòu)為Vite內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue項目首屏打開速度慢的解決方法

    vue項目首屏打開速度慢的解決方法

    這篇文章主要介紹了vue項目首屏打開速度慢的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • 淺談vue 錨點指令v-anchor的使用

    淺談vue 錨點指令v-anchor的使用

    今天小編就為大家分享一篇淺談vue 錨點指令v-anchor的使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue 重塑數(shù)組之修改數(shù)組指定index的值操作

    vue 重塑數(shù)組之修改數(shù)組指定index的值操作

    這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼

    vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼

    本文通過實例代碼給大家介紹了vue.js通過路由實現(xiàn)經(jīng)典的三欄布局，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-07-07
  • 五分鐘搞懂Vuex實用知識(小結(jié))

    五分鐘搞懂Vuex實用知識(小結(jié))

    本篇文章主要介紹了五分鐘搞懂Vuex實用知識，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Vue3?源碼解讀之副作用函數(shù)與依賴收集

    Vue3?源碼解讀之副作用函數(shù)與依賴收集

    本文深入分析了副作用的實現(xiàn)以及執(zhí)行時機，并詳細分析了用于存儲副作用函數(shù)的targetMap的數(shù)據(jù)結(jié)構(gòu)及其實現(xiàn)原理，還深入分析了依賴收集track函數(shù)以及派發(fā)更新 trigger 函數(shù)的實現(xiàn),需要的朋友可以參考下
    2022-08-08
  • vue如何獲取當前url地址加端口號

    vue如何獲取當前url地址加端口號

    這篇文章主要介紹了vue如何獲取當前url地址加端口號問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • vue-awesome-swiper 基于vue實現(xiàn)h5滑動翻頁效果【推薦】

    vue-awesome-swiper 基于vue實現(xiàn)h5滑動翻頁效果【推薦】

    說到h5的翻頁，很定第一時間想到的是swiper。但是我當時想到的卻是，vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實現(xiàn)h5滑動翻頁效果 ,需要的朋友可以參考下
    2018-11-11

    • 最新評論