Access vitE2 in the development stage of VUe2.0 family bucket project

Vite2.0 version, official documentation said that has nothing to do with the framework, try a wave of new project access can refer to: juejin.cn/post/692791…

Introduction of Vite dependency NPM I Vite vite-pugin-vue2 -d 2. Add and configure Vite. Config.js in the project root directory

import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  base: '/',
  plugins: [
    // vue()
    createVuePlugin()
  ]
})  
Copy the code

3, Add the entry index.html file to the project root directory as public/index.html. 

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" href="/favicon.ico"> <link rel="dns-prefetch" href=""> <title></title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> <! -- built files will be auto injected --> </body> </html>Copy the code

4. Add the boot option NPM Run vite

History of the problems encountered when accessing vue2.0 projects

Env = import. Meta. Env = import

A historical project development environment access vite2.0 build time comparison, improved about 3 times:

Vite2 github.com/vitejs/vite

Vite2 uses ESbuild instead of rollup for dependency packaging. Esbuild is compiled into native code using GO. The binary package of the corresponding platform is dynamically removed during NPM installation. Support for MAC, Linux, and Windows 2. Vite only supports native ESM browsers by default, but older browsers can also be supported through the official @vite/ plugin-Legacy.

import legacyPlugin from 'vite-plugin-legacy' export default { plugins: [ // The default options are listed below. Pass nothing to use them. legacyPlugin({ // The browsers that must be supported by your legacy bundle. // https://babeljs.io/docs/en/babel-preset-env#targets targets: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead',], // Define which polyfills your legacy bundle needs. They will be loaded // from the Polyfill.io server. See the "Polyfills" section for more info. polyfills: [ // Empty by default ], // Toggles whether or not browserslist config sources are used. // https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig ignoreBrowserslistConfig: false, // When true, core-js@3 modules are inlined based on usage. // When false, global namespace APIs (eg: Object.entries) are loaded // from the Polyfill.io server. corejs: false, }) ] }Copy the code

3, multi-framework support, vue, React

@ vite/plugin – legacy: www.npmjs.com/package/vit… Esbuild reference zhuanlan.zhihu.com/p/139219361 github.com/evanw/esbui…