前言

1.相信大家有时候碰到开发环境没问题，上传到线上就会出现样式错乱或者出现bug。

2.对于我本身这个项目来说，前期是用vue3来写的，心里想的也是用vue3+vite+pinia练练手。体验一下组合式api，<script setup>语法糖，还有vite带来的极速开发响应。但是因为种种原因被告知这个项目要去兼容IE11，不得不选择了Vue 2.7 "Naruto", 不仅可以完成开发还可以使用到vue3的新特性。

3.vite在开发时是不支持ie的，但在生产环境 传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

这时候就又有一个问题，在开发的时候ie看不了，这怎么做兼容呢？所以有了这篇文章。

1.准备PHPStudy（小皮）

下载PHPStudy（小皮）下载地址。安装好。（当然用类似的也可以）。

2.vite.config.ts配置

就是@vitejs/plugin-legacy的插件配置

import vue from '@vitejs/plugin-vue2'
import legacy from '@vitejs/plugin-legacy' 

plugins: [
      vue(),
      // https://github.com/antfu/vite-plugin-components
      legacy({
        targets: ['ie >= 11'], //配置
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      }),
    ],

3.打包以及项目创建

1.打包项目，然后在图片那里创建网站。

2.将打包后的项目放到创建网站对应的目录。

3.启动

4.配置首页指向和跨域代理

1.找到对应网站的配置文件，用记事本打开。（删掉原有的配置）

server {
        listen        80;
        server_name  test.com;
        root   "E:/phpstudy_pro/WWW/by_wg_mweb";
        location / {
  	try_files $uri $uri/ /index.html; #首页指向
        }
        location /webgame{
  	# 代理的地址
                proxy_pass #你的数据请求地址;
       }

}

2.浏览器打开你创建网站时候的网站域名，成功运行。

总结

fuck ie ！！