FAQ

[IndexXuan]

Collect some FAQ here.

[IndexXuan]

Why vite so slow

• It is because the first load of vite, it needs deps prebundle, you can use optimizeDeps for help.
  • docs
  • examples

How to debug this plugin

• use VITE_DEBUG=true yarn vite, you will find something.

Vite Build Support

• Currently only support vite dev for development, you should still use yarn build(vue-cli-service build)
• But you can use BUILD=true MODERN=true yarn vite to invoke vite build(no legacy and use esbuild minify, not recommended, please use yarn build instead)

How to completely migrate to vite in the future

• if this plugin help you fix error and use vite successfully, it is not too hard to migrate, compared to directly migrate from vue-cli or others
• safely replace all VUE_APP_ to VITE_ code (e.g. .env.*)
• safely replace all process.env.VUE_APP_ to import.meta.env.VITE_ in client-side code.
• safely copy ./node_modules/vite-plugin-vue-cli/config/index.ts to $projectRoot/vite.config.ts and install corresponding vite-plugin list by it
• add npm scripts dev: vite & build: vite build, remove other vue-cli scripts, like serve
• migrate all require.context to import.meta.glob/globEager
• remove all webpack plugins/vue-cli plugins and migrate all vue.config.js setted chainWebpack/configureWebpack to corresponding vite plugin or options
• deps & devDeps cleanup
• other cleanup and tests

Some module response 404 not found

• if not compiler errors, maybe you import vue file without .vue ext, added it and it is required for vite and recommended for vue-cli (and required in vue-cli 5.x)

Custom Style missing fonts

• as of v1.0.0-rc.5, it was fixed. raise issue if you have problems.
• e.g. element-plus: https://element-plus.gitee.io/#/en-US/component/custom-theme

/* theme color */
$--color-primary: teal;

/* icon font path, required */
$--font-path: '~element-plus/lib/theme-chalk/fonts'; // nothing to change

@import "~element-plus/packages/theme-chalk/src/index"; // nothing to change

JSX support

• see options above, vitePluginVue2Options: { jsx: true }
• you may also see that React is not defined, it is you use jsx without set vitePluginVue2Options: { jsx: true }

Vue 3 support

• currently only support Vue2.x, since Vue3.x you can use vite directly
• Vue 3 support by v1.0.0-rc.4

Deep reliance on Webpack(vue-cli-plugin)

• for example: if project use lots of vue-cli-plugin to modify webpack-config, like vue-cli-plugin-auto-routing/vue-cli-plugin-mock/vue-cli-plugin-xxx, you should write vite-plugin-auto-routing/vite-plugin-mock/vite-plugin-xxx to do the same thing and pass in project vue.config.js#pluginOptions.vite.plugins.

// vue.config.js
import ViteAutoRouting from '@scope/vite-plugin-auto-routing'

module.exports = {
  pluginOptions: {
    vite: {
      plugins: [ViteAuthRouting()],
    },
  },
}