问题解决用了文章：
https://blog.csdn.net/guyue_01/article/details/129082021
https://blog.csdn.net/xiaolinlife/article/details/131549948
import { fileURLToPath, URL } from 'node:url'
import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { VantResolver } from 'unplugin-vue-components/resolvers'
import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { resolve, join } from 'path'
import legacyPlugin from '@vitejs/plugin-legacy'
import VitePluginCompression from 'vite-plugin-compression'
import px2rem from 'postcss-pxtorem'
// https://vitejs.dev/config/
let viteConfig =({command,mode})=>{
const envConfig=loadEnv(mode,'./')
console.log(envConfig)
const config={
plugins: [
vue(),
Components({
dts: true,
dirs: ['src/components'], // 按需加载的文件夹
resolvers: [
VantResolver(),
]
}),
envConfig==='production'?require('postcss-plugin')(): false,
// 浏览器兼容问题配置
legacyPlugin({
targets: ['defaults', 'not IE 11','chrome 37','chrome 40','firefox 49'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
renderLegacyChunks: true,
polyfills: [
'es.promise',
'es.promise.finally',
'es/map',
'es/set',
'es.array.filter',
'es.array.for-each',
'es.array.flat-map',
'es.object.define-properties',
'es.object.define-property',
'es.object.get-own-property-descriptor',
'es.object.get-own-property-descriptors',
'es.object.keys',
'es.object.to-string',
'web.dom-collections.for-each',
'esnext.global-this',
'esnext.string.match-all'
]
}),
VitePluginCompression({ compressionOptions:{ ext:".gz", algorithm:"gzip", deleteOriginFile: false, verbose: false,},}),
],
css: {
preprocessorOptions: {
scss: {
additionalData: "@import '@/assets/scss/app.scss';"
}
},
postcss:{
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['Android 4.0', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 6'],
}),
px2rem({
rootValue: 75,
unitPrecision: 5, //保留rem小数点多少位
propList: ['*','!border'] }),
],
}
},
resolve: {
extensions:['.mjs','.js','.ts','.jsx','.tsx','.json','.vue'],
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: resolve(process.cwd(),'dist'),// 指定输出路径（相对于 项目根目录)
sourcemap: false, // 构建后是否生成 source map 文件
chunkSizeWarningLimit: 1500, // 规定触发警告的 chunk(文件块) 大小
rollupOptions: { // 自定义底层的 Rollup 打包配置
input: {
main: resolve(__dirname, 'index.html'),
},
output: {
// 用于命名代码拆分时创建的共享块的输出命名
chunkFileNames: 'js/[name]-[hash].js',
// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
entryFileNames: 'js/[name]-[hash].js',
// 用于输出静态资源的命名放到dist中的static文件夹下，[ext]表示文件扩展名
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
},
},
emptyOutDir: true,
target: ['iOS11', 'Chrome31', 'firefox31', 'ie6','es2015'],
cssTarget:['chrome61', 'firefox31', 'ie6','es2015'],
}
}
return defineConfig(config)
}
export default viteConfig
package.json
{
"name": "hshs_web",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite --mode development",
"dev:local": "vite --mode dte",
"dev:prod": "vite",
"build": "vite build",
"build:dev": "vite build --mode development",
"preview": "vite preview"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@vitejs/plugin-legacy": "^4.1.0",
"amfe-flexible": "^2.2.1",
"autoprefixer": "^10.4.14",
"axios": "^1.4.0",
"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.64.0",
"terser": "^5.19.1",
"unplugin-vue-components": "^0.25.1",
"vant": "^4.6.2",
"vant-ui": "^2.2.3",
"vite-plugin-compression": "^0.5.1",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@babel/core": "^7.22.10",
"@babel/plugin-transform-runtime": "^7.22.10",
"@babel/preset-env": "^7.22.10",
"@vitejs/plugin-vue": "^4.2.3",
"babel-polyfill": "^6.26.0",
"es6-promise": "^4.2.8",
"unplugin-vue-components": "^0.25.1",
"vite": "^4.3.9"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 11"
]
}
下面为转载内容
1、安装babel/polyfill及其相关依赖
解决低版本浏览器（谷歌浏览器66.0版本）的兼容性问题，说白了就是低版本浏览器不支持最新的语法，所以要把最新的语法转换成低版本浏览器能够识别加载的老语法。那些版本较低的浏览器不支持ES6的语法和新API，而Babel默认只转换新的JavaScript句法，不转换新的API，比如Proxy、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法都不会转码。
npm install --save @babel/polyfill
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill
2、在main.js当中引入，注意：一定要在最上面第一行
import "@babel/polyfill"; //(一定要在最上面，第一行)
import Es6Promise from "es6-promise";
Es6Promise.polyfill();
import { createApp } from "vue";
import router from "@/router";
import store from "@/store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import { createPinia } from "pinia";
const app = createApp(App);
app
.use(store)
.use(ElementPlus)
.use(router)
.use(createPinia())
.mount("#app");
3、新建babel.config.js文件
module.exports = {
presets: [
[
"@vue/app",
{
useBuiltIns: "entry",
polyfills: ["es6.promise", "es6.symbol"],
},
],
[
"@babel/preset-env",
{
modules: false,
useBuiltIns: "entry",
corejs: 2,
},
],
],
};
4、在package.json文件browserslist配置
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 11"
]
5、创建.babelrc文件与vite.config.js同级
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
结果
按照上面的步骤配置好之后，本地开发环境是正常的，但是打包部署在测试环境上之后，就报错了。
报错信息如下：
Uncaught SyntaxError: Unexpected token ?
无法解析 ??
??是es6中的语法，所以还是兼容性没做好。
怎么能解决这个问题呢？我又开始尝试其他方案了。
首先说一下哈，上面加的代码我没有删除，然后又添加的下面的解决方案。
6、解决方案
在vite.config.js中配置浏览器的兼容性。
我们项目是用vite搭建的，因此我首先想到了使用vite自带的API去配置浏览器兼容性。
配置build.target和buid.cssTarget
build: {
target: ['chrome52'],
cssTarget: ["chrome52"],
}
我在vite.config.js中加入这段代码后就可以了，页面可以运行在谷歌低版本浏览器上了。
至此浏览器兼容性问题算是解决了
————————————————
版权声明：本文为CSDN博主「时清云」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaolinlife/article/details/131549948
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
