The project uses VUe3 +vite package, in the development process will encounter some problems, now make a summary, the content will continue to update. If you have a better solution, please leave a comment.

1. Degrade some browsers that do not support native esModule syntax

Use plugin-legancy to do compatibility processing.

// Install the plug-in yarn add@vitejs /plugin-legancy -dCopy the code

Plugin address: www.npmjs.com/package/@vi…

What plug-ins do :(quote from plug-in introduction)

  1. Generate a corresponding legacy chunk for every chunk in the final bundle, transformed with @babel/preset-env and emitted as SystemJS modules (code splitting is still supported!) .
  2. Generate a polyfill chunk including SystemJS runtime, and any necessary polyfills determined by specified browser targets and actual usage in the bundle.
  3. Inject
  4. Inject the import.meta.env.LEGACY env variable, which will only be true in the legacy production build, and false in all other cases.

Plugin use :(reference from plugin use)

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}
Copy the code

To support Internet Explorer 11, set the following parameters:

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
}
Copy the code

Plug-in side effects:

The use of plug-ins affects styling and increases packaging time and file size. Whether to use it should be decided according to the actual situation of the project.

2. Vite project in wechat applet style RGBA to hexadecimal # rGBA value

Set the build.cssTarget value in vite. Config. js. Vitejs. dev/config/#bui…

build.cssTarget#

Type: string | string[]

Default: the same as build.target

This options allows users to set a different browser target for CSS minification from the one used for JavaScript transpilation.

It should only be used when you are targeting a non-mainstream browser. One example is Android WeChat WebView, which supports most modern JavaScript features but not the #RGBA hexadecimal color notation in CSS. In this case, you need to set build.cssTarget to chrome61 to prevent vite from transform rgba() colors into #RGBA hexadecimal notations.

// vite.config.js {build: {cssTarget: chrome61 // The value is chromeN... }}Copy the code

3. Language Settings for Element-Plus

The Vue3 project introduced the Element-Plus package to make use of the Element component library. The default language of the Element-Plus component library is English. You need to set the language to Chinese.

// main.ts
import { createApp } from 'vue';
import ElementPlus from 'element-plus'   
import locale from 'element-plus/lib/locale/lang/zh-cn'  

createApp(App)
    .use(ElementPlus, { locale })    
    .mount('#app');
Copy the code

If the following error occurs during the use of element-plus in the project, the vite.config.js should be set:

[vite] Avoid deep import “element-plus/lib/locale/lang/zh-cn” (imported by /@/main.ts) because “element-plus” has been pre-optimized by vite into a single file. Prefer importing directly from the module entry:

import { … } from “element-plus”

If the dependency requires deep import to function properly, add the deep path to optimizeDeps.include in vite.config.js.

Modify the optimizedeps.include Settings in viet.config. js as prompted:

// vite.config.js
{
    optimizeDeps: {
        include: ['element-plus/lib/locale/lang/zh-cn']
    }
}
Copy the code

Reference links:

www.npmjs.com/package/@vi…

Vitejs. Dev/config / # bui…