Vue 2.7 + Vite

vue2.7 + vue-router3 + pinia
示例代碼: https://github.com/klren0312/vite_vue2.7
示例頁面: https://klren0312.github.io/vite_vue2.7/

用到的vite插件

• @vitejs/plugin-vue2 vite的vue2.7插件
• @vitejs/plugin-legacy 打包支持IE
• unplugin-vue-components 按需引入插件

相關(guān)配置

1. vscode的vetur插件適配

參考資料: https://github.com/vuejs/vetur/issues/2296#issuecomment-1155957974

需要在根目錄創(chuàng)建vetur.config.js

// vetur.config.js
module.exports = {
  settings: {
    'vetur.completion.autoImport': false,
    'vetur.experimental.templateInterpolationService': false,
    'vetur.validation.interpolation': false,
    'vetur.validation.template': false,
    'vetur.validation.templateProps': false,
    'vetur.validation.style': false,
    'vetur.validation.script': false,
    'vetur.format.enable': false,
    'vetur.ignoreProjectWarning': true,
    'vetur.languageFeatures.codeActions': false,
    'vetur.languageFeatures.semanticTokens': false,
    'vetur.languageFeatures.updateImportOnFileMove': false,
    'vetur.trace.server': 'off',
    'vetur.underline.refValue': false,
  },
}

或者改用volar插件

usevolar.png

2. vite適配vue2.7

參考資料: https://github.com/vuejs/vue/blob/main/CHANGELOG.md#vue-cli--webpack

使用官方的@vitejs/plugin-vue2插件

vite創(chuàng)建vue項目后, 把插件替換下就行了

3. vue-router安裝

vue2應(yīng)該只支持vue-router3版本

4. pinia安裝

按官方文檔引入即可: https://pinia.vuejs.org/getting-started.html#installation

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

5. element-ui按需引入

使用unplugin-vue-components插件

• ?? Vue 2 和 Vue 3 開箱即用
• ? 支持組件和指令.
• ?? 支持 Vite, Webpack, Vue CLI, Rollup, esbuild 等打包工具, powered by <a >unplugin</a>.
• ?? Tree-shakable,只注冊引用的組件.
• ?? 文件夾名稱作為命名空間.
• ?? ts支持.
• ?? 內(nèi)置解析器 支持主流的UI庫.
• ?? 對 unplugin-icons支持友好.

使用方法(element-ui為例):

import Components from 'unplugin-vue-components/vite'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementUiResolver()],
    }),
  ],
})

6. 打包后支持ie11

使用@vitejs/plugin-legacy插件

import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not ie < 9'],
    }),
  ],
})

7. 分離打包

參考資料: https://cn.vitejs.dev/guide/build.html#chunking-strategy

import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
  plugins: [
    splitVendorChunkPlugin(),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'element-ui': ['element-ui'],
        },
      },
    },
  },
})