vue2.7 + vue-router3 + pinia 示例代码: https://github.com/klren0312/vite_vue2.7 示例页面: https://klren0312.github.io/vite_vue2.7/
- @vitejs/plugin-vue2 vite的vue2.7插件
- @vitejs/plugin-legacy 打包支持IE
- unplugin-vue-components 按需引入插件
需要在根目录创建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插件
参考资料: https://github.com/vuejs/vue/blob/main/CHANGELOG.md#vue-cli--webpack
vite创建vue项目后, 把插件替换下就行了
vue2只支持vue-router3版本
若需要在页面中使用$route和$router, 可以在路由文件中新增两个方法
export function useRouter() {
return router
}
export function useRoute() {
return router.currentRoute
}按官方文档引入即可: 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,
})- 💚 Vue 2 和 Vue 3 开箱即用
- ✨ 支持组件和指令.
- ⚡️ 支持 Vite, Webpack, Vue CLI, Rollup, esbuild 等打包工具, powered by unplugin.
- 🏝 Tree-shakable,只注册引用的组件.
- 🪐 文件夹名称作为命名空间.
- 🦾 ts支持.
- 🌈 内置解析器 支持主流的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()],
}),
],
})import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not ie < 9'],
}),
],
})参考资料: https://rollupjs.org/configuration-options/#output-manualchunks
import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
plugins: [
splitVendorChunkPlugin(),
],
build: {
rollupOptions: {
output: {
manualChunks: {
'element-ui': ['element-ui'],
echarts: ['echarts', 'vue-echarts'],
},
},
},
},
})