vue/vite相关

[xccjk]

vite打包后的项目在有的浏览器上报错globalThis is not defined

1. 安装依赖

@vitejs/plugin-legacy 2.x版本，需要vite3.x版本

yarn add @vitejs/plugin-legacy -D

2. 修改vite.config.js相配置

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  build: {
      target: 'es2015',
  },
  plugins: [
      legacy({
          targets: ['Chrome 63'],
          additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
          modernPolyfills: true,
      }),
  ]
})

3. 修改入口文件mian.js和index.html

// main.js
if (typeof window.global === 'undefined') {
  window.global = window;
}

// index.html
<script>
  var global = globalThis;
</script>
<script>
  this.globalThis || (this.globalThis = this);
</script>

资料

[xccjk]

Cannot destructure property 'renderBuiltUrl' of 'config.experimental' as it is undefined

在安装了@vitejs/plugin-legacy版本2.x后，运行npm run build进行打包，报错：

Cannot destructure property 'renderBuiltUrl' of 'config.experimental' as it is undefined

原因：plugin-legacy版本为2.x后，vite版本需要为3.x版本

"devDependencies": {
    "@vitejs/plugin-legacy": "^2.1.0",
    "vite": "^3.1.0",
    ...
  }

[xccjk]

vue3与vite下，element-plus组件库怎么实现按需引入

按需引入意义：减小打包后的包体积

全量引入

// main.js
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

...

app.use(ElementPlus, { locale: zhCn });

手动按需引入

<template>
  <div class="app">
    <el-button>按钮</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// 局部引入
import { ElButton } from 'element-plus'
import 'element-plus/theme-chalk/el-button.css'
import 'element-plus/theme-chalk/base.css'

export default defineComponent({
  components: { ElButton },
  setup() {
    return {}
  }
})
</script>

<style lang="less"></style>

自动按需引入同时设置国际化

1. 安装依赖unplugin-auto-import和unplugin-vue-components

yarn add unplugin-auto-import unplugin-vue-components -D

2. 修改vite.config.js文件

import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  ...
  plugins: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: true })],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: true })],
    }),
  ],
});

3. 入口文件App.vue设置国际化

<template>
  <ElConfigProvider :locale="locale">
    <router-view />
  </ElConfigProvider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'
  import zhCn from 'element-plus/lib/locale/lang/zh-cn'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>

<style lang="less"></style>

大功告成