为什么我的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
引用 皆我百晓生 小程序回复内容作答：
在 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 插件，并确保你的代码在目标浏览器中能够正常运行。
如果问题仍然存在，建议检查其他代码或配置中是否存在其他可能引发问题的因素。
希望能帮到你！如果还有其他问题，请随时提问。
【相关推荐】