vue3+vite项目,去掉legacy配置语句打包无法打开网页

Question

为什么我的vue3+vite项目，在如下配置文件

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  esbuild: {
    target: 'es2015'
  },
  babel: {
    configFile: true
  },
  base:'./',
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    vue(),
  ],
  server: {
    host: "0.0.0.0",
    port: 1234,
    proxy: {
      "/api": {
        target: 'http://*******',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

去掉了下面的这段代码之后，dist包中的index.html就根本启动不了了，在去掉之前我可以直接打开并使用

 legacy({
      targets: ['defaults', 'not IE 11']
    }),

上了服务器报错：Uncaught SyntaxError: Unexpected token ?，不上服务器这个index.html打都打不开，在去掉之前一切正常，dist包也能打开，上服务器，会先执行一遍index.js，然后再执行一遍index-legacy.js

Answer 1

引用 皆我百晓生 小程序回复内容作答：
在 Vue 3 + Vite 项目中，使用 legacy 插件是为了支持旧版浏览器（如 IE11）的兼容性。当你移除了这个插件后，可能会导致一些旧版浏览器无法正确解析你的代码，并引发 Uncaught SyntaxError: Unexpected token ? 错误。

这个错误通常是由于旧版浏览器不支持一些在现代 JavaScript 语法中引入的特性，例如可选链操作符 ?.。当这些特性在旧版浏览器中出现时，会被认为是语法错误。

如果你确定不需要支持旧版浏览器，可以尝试以下方法修改配置文件，以避免这个错误：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  esbuild: {
    target: 'es2015'
  },
  babel: {
    configFile: true
  },
  base:'./',
  plugins: [
    vue(),
  ],
  server: {
    host: "0.0.0.0",
    port: 1234,
    proxy: {
      "/api": {
        target: 'http://*******',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

请注意，删除 legacy 插件后可能导致你的应用无法在旧版浏览器中正确运行。如果你的项目需要兼容旧版浏览器，建议重新加入 legacy 插件，并确保你的代码在目标浏览器中能够正常运行。

如果问题仍然存在，建议检查其他代码或配置中是否存在其他可能引发问题的因素。

希望能帮到你！如果还有其他问题，请随时提问。