nuxt官方对于nuxt.config.ts配置的介绍在Nuxt3.0 nuxt.config.ts配置
关于如何配置本人只能给出一点点启发，具体的配置需要根据个人需求去配置
nuxt.config.ts配置、跨域处理
import { prismjsPlugin } from "vite-plugin-prismjs";
export default defineNuxtConfig({//浏览器适配（随着浏览器变化而变化）// postcss: {// plugins: {// 'postcss-px-to-viewport-8-plugin': {// unitToConvert: 'px', // 需要转换的单位，默认为"px"// viewportWidth: 1920, // 设计稿的视口宽度// unitPrecision: 5, // 单位转换后保留的精度// propList: ['*'],// // propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换// viewportUnit: 'vw', // 希望使用的视口单位// fontViewportUnit: 'vw', // 字体使用的视口单位// // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。// // 下面配置表示类名中含有'keep-px'都不会被转换// selectorBlackList: ['keep-px'],// minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换// mediaQuery: false, // 媒体查询里的单位是否需要转换单位// replace: true, // 是否直接更换属性值，而不添加备用属性// exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件// include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换// landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)// landscapeUnit: 'vw', // 横屏时使用的单位// landscapeWidth: 1338, // 横屏时使用的视口宽度// }// }// },app: {baseURL: "/路径名称/",//head: {title: "",link: [{rel: "icon",type: "images/x-icon",href: "网站ico图标",},],script: [{src: "导入需要的内容文件", type: "text/javascript" },],meta: [{ charset: "utf-8" },{ name: "viewport", content: "width=device-width, initial-scale=1" },{ hid: "keywords", name: "keywords", content: "" },{ hid: "description", name: "description", content: "" },],},//文件转换的特效 pageTransition: { name: 'slide-right', mode: 'out-in' },},css: [//导入的css文件"~/assets/css/public.scss","@/assets/css/iconfont.css","swiper/swiper-bundle.min.css",],plugins: [{ src: "~/plugins/vant.ts", ssr: false }],//使用的plugins文件build: {transpile: ["swiper", "vant"],},modules: ["导入的模块文件t"],devServer: {port: 3000,},//vite配置vite: {css: {preprocessorOptions: {scss: {additionalData: '@use "~/assets/css/common.scss" as *;',},},},plugins: [prismjsPlugin({languages: ["javascript", "css", "html", 'java', 'json', 'js'],plugins: ["toolbar", "show-language", "copy-to-clipboard"],theme: "tomorrow", // 主题css: true,}),],},//跨域处理nitro: {devProxy: {"/api": {target: "配置Api链接",changeOrigin: true,// prependPath: true,},},},
});浏览器适配处理
Nuxt3 项目的浏览器兼容性主要取决于所使用的浏览器版本。Nuxt3 支持 ES6+ 的浏览器版本，如 Chrome、Firefox、Safari 等。具体来说，以下是 Nuxt3 官方文档中给出的浏览器版本兼容列表:
- Chrome 61+
- Firefox 60+
- Safari 11.1+
- Edge 16+
- iOS Safari 11.3+
- Android Browser 67+
- Chrome for Android 69+
这些浏览器版本提供了对 ES6+ 的支持因此 Nuxt3 可以在这些浏览器上正常运行。如果需要支持更老的浏览器版本，可以使用 Babel 进行编译，但这可能会增加项目的体积和加载时间。
浏览器适配可以使用QQ浏览器的兼容模式
调整兼容模式变成了
nuxt3.0兼容后提示样式为
需要在nuxt.config.ts引入下面的代码
nuxt.config.ts配置
script: [{src: "代码地址", type: "text/javascript" },],```代码
```javascript
var _iealwn = _iealwn || {};
!(function () {document.write('<div id="_iealwn_js" data-outver="11" style="height:0;"></div>');var drrHttp = "https://support.dmeng.net/ie-alert-warning";_iealwn.dir = drrHttp;_iealwn.jselem = document.getElementById("_iealwn_js");var docmode = document.documentMode;if (docmode) {_iealwn.browser = browser();setTimeout(function () {fixload(5);}, 1500);}
})();function browser() {var u = window.navigator.userAgent;var browser = "IE";if (u.indexOf("QQBrowser") > -1) {browser = "QQBrowser";} else if (u.indexOf("2345Explorer") > -1) {browser = "2345Explorer";} else if (u.indexOf("MetaSr") > -1 || u.indexOf("Sogou") > -1) {browser = "Sogou";} else if (u.indexOf("Baidu") > -1 || u.indexOf("BIDUBrowser") > -1) {browser = "Baidu";} else if (u.indexOf("UC") > -1 || u.indexOf(" UBrowser") > -1) {browser = "UC";} else if (u.indexOf("LBBROWSER") > -1 ||(!!window.external && !!window.external.LiebaoAutoFill_CopyToClipboard)) {browser = "LBBROWSER";} else if (u.indexOf("Maxthon") > -1 ||!!window._MX$MF_6a39a14b_c884_4333_a26b_08330f10ab4aMxBIG) {browser = "Maxthon";} else if (u.indexOf("360SE") > -1) {browser = "360SE";} else {// IE9、10if (!!u.match(/MSIE (9|10)/g)) {// 根据窗口标题栏、网址栏、收藏栏高度判断var navigator_top = window.screenTop - window.screenY;switch (navigator_top) {case 71:case 100:case 102:case 126:browser = "2345Explorer";break;case 75:case 74:case 105:case 104:browser = "360SE";break;}}}return browser;
}function closetouch() {var el = document.getElementById("_iealwn_div");el.innerHTML = "";delete el;if (!!_iealwn.once) {var d = new Date();d = new Date(d.getTime() + 1000 * 60 * _iealwn.once);document.cookie = "_iealwn=once; expires=" + d.toGMTString() + "; path=/";}
}function load() {if (!_iealwn.once) {_iealwn.once = parseFloat(_iealwn.jselem.getAttribute("data-once"));if (isNaN(_iealwn.once)) _iealwn.once = 0;}if (!_iealwn.outver) {_iealwn.outver = parseFloat(_iealwn.jselem.getAttribute("data-outver"));if (isNaN(_iealwn.outver)) _iealwn.outver = 10;}if (_iealwn.outver < 6) _iealwn.outver = 6;if (_iealwn.outver > 11) _iealwn.outver = 11;// 国产双核浏览器_iealwn.browserNames = {QQBrowser: "QQ浏览器","360SE": "360安全浏览器",// "2345Explorer": "2345加速浏览器",Baidu: "百度浏览器",LBBROWSER: "猎豹安全浏览器",Maxthon: "傲游浏览器",Sogou: "搜狗浏览器",UC: "UC浏览器",};// 示意图高度_iealwn.imgHeight = {QQBrowser: 172,"360SE": 176,// "2345Explorer": 243,Baidu: 172,LBBROWSER: 220,Maxthon: 400,Sogou: 119,UC: 126,};var css ='#iealertwn{text-align:center;display:block!important}\#iealertwn .iealwn-text-muted .touchcss{color:#da2128;text-decoration:underline;cursor: pointer;}\#iealertwn .iealwn-text-muted .touchcss-g{color:#999;text-decoration:underline;cursor: pointer;}\#iealertwn .iealwn-wrap{position:absolute;z-index:2147483647;top:25px;left:0;right:0}\#iealertwn .iealwn-box{width:800px;margin:0 auto 20px;overflow:hidden;border:1px solid #ededed}\#iealertwn .iealwn-main{border:10px solid #fff;font-family:"宋体"}\#iealertwn .iealwn-line{height:32px;line-height:32px;background-color:#ffeeba;color:#c4691f;text-align:center;font-size:12px}\#iealertwn .iealwn-line a{color:#c4691f;text-decoration:none}\#iealertwn .iealwn-notice{background-color:#fff8e5;padding:50px 55px 55px;text-align:left;color:#c4691f;font-size:16px}\#iealertwn .iealwn-title{display:block;background-repeat:no-repeat;line-height:22px;height:22px;padding-left:26px;margin:50px 0 10px 0;font-weight:700}\#iealertwn .iealwn-title_alert{margin:0 0 24px;padding:0;font-size:24px;line-height:28px;height:28px;color:#da2128}\#iealertwn .iealwn-title_horn{background-image:url(' +_iealwn.dir +"/images/icon_horn.png)}\#iealertwn .iealwn-title_browser{background-image:url(" +_iealwn.dir +"/images/icon_browser.png)}\#iealertwn .iealwn-title_faq{background-image:url(" +_iealwn.dir +'/images/icon_faq.png)}\#iealertwn .iealwn-text{position:relative;margin:10px 2px;line-height:24px}\#iealertwn .iealwn-text-muted, #iealertwn .iealwn-text-muted a{color:#999}\#iealertwn a{color:#da2128;text-decoration:underline}\#iealwn-browsers .iealwn-browser-link{text-decoration:none;display:inline-block;width:90px;color:#c4691f}\#iealwn-browsers .iealwn-browser-dlink{text-decoration:none;background-color:#ffeeba;color:#c4691f;display:inline-block;width:60px;text-align:center}\#iealwn-browsers .iealwn-browser-dlink:hover{background-color:#dc3545;color:#fff}\#iealwn-browsers .iealwn-browser-clear{clear:left;width:100%;height:1px;content:""}\#iealwn-browsers .iealwn-browser{background-color:#fff;background-repeat:no-repeat;background-position:8px 5px;line-height:44px;padding-left:50px;float:left;margin:18px 18px 0 0}\#iealwn-browsers .iealwn-browser-mr0{margin-right:0}\#iealertwn .iealwn-line .iealwn-close{cursor: pointer;width:100%;height:100%;display:inline-block;}\img.iealwn-guide{background:url(' +_iealwn.dir +"/images/blank.png) no-repeat center center #e9ecef}";var style = document.createElement("style");style.id = "_iealwn_style";style.type = "text/css";if (style.styleSheet) style.styleSheet.cssText = css;else style.innerHTML = css;document.getElementsByTagName("head")[0].appendChild(style);var browsers = [{slug: "chrome",bgimg:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/chrome.png',bgimg_gray:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/chrome_gray.png',name: "谷歌浏览器",url: "https://www.google.cn/chrome/?hl=zh-CN&standalone=1",durl: "https://www.google.cn/chrome/thankyou.html?standalone=1&statcb=0&installdataindex=defaultbrowser",},{slug: "firefox",bgimg:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/firefox.png',bgimg_gray:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/firefox_gray.png',name: "火狐浏览器",url: "https://www.mozilla.org/zh-CN/firefox/new/",durl: "https://download.mozilla.org/?product=firefox-stub&os=win&lang=zh-CN",},{slug: "edge",bgimg:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/edge.png',bgimg_gray:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/edge_gray.png',name: "微软浏览器",url: "https://www.microsoft.com/zh-cn/windows/microsoft-edge",durl: "https://www.microsoft.com/zh-cn/windows/microsoft-edge",},{slug: "sogou",bgimg:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/sogou.png',bgimg_gray:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/sogou_gray.png',name: "搜狗浏览器",url: "https://ie.sogou.com/",durl: "https://dlie.sogoucdn.com/se/sogou_explorer_11.0.1.34700_0000.exe",},{slug: "se360",bgimg:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/se360.png',bgimg_gray:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/se360_gray.png',name: "360浏览器",url: "https://browser.360.cn/se/",durl: "https://dl.360safe.com/netunion/20140425/360se+75526+n1abed0ce91.exe",},{slug: "qqbrowser",bgimg:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/qqbrowser.png',bgimg_gray:'https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/website/ie/images/qqbrowser_gray.png',name: "QQ浏览器",url: "http://browser.qq.com/",durl: "https://cdntip-net-production-file-1251013107.file.myqcloud.com/myapp/rcps/d/85000/QQBrowser_subid@100002_urlid@100002.exe",},];var isXP = navigator.userAgent.indexOf("Windows NT 5") != -1;var is7or8 = navigator.userAgent.indexOf("Windows NT 6") != -1;var browsersHtml = "";for (var i = 0; i < browsers.length; i++) {var slug = browsers[i]["slug"];var bgimg = browsers[i]["bgimg"];var bgimg_gray = browsers[i]["bgimg_gray"];var classes = "iealwn-browser iealwn-browser_" + slug;// 第三个右边距设置为0，必须用这个蠢办法，因为要支持IE6if ((i + 1) % 3 == 0) classes += " iealwn-browser-mr0";//isXP && slug.match(/(chrome|firefox|edge)/g)if (isXP && slug.match(/(chrome|firefox|edge)/g)) {// 谷歌、火狐、微软浏览器都不支持 Windows XPvar warningTitle = browsers[i]["name"] + "已经全面停止支持 Windows XP 系统！请选择其他浏览器。";if (slug == "edge")warningTitle ="Microsoft Edge 专为 Windows 10 打造！请选择其他浏览器。";browsersHtml +='<div class="' +classes +'" style="background-image:url('+bgimg_gray +')">\<a href="#" οnclick="alert(\'' +warningTitle +'\');return false;" class="iealwn-browser-link" style="color:#777">' +browsers[i]["name"] +'</a>\<a href="#" οnclick="alert(\'' +warningTitle +'\');return false;" class="iealwn-browser-dlink" style="color:#777;background:#ccc">不支持</a>\</div>';} else if (is7or8 && slug == "edge") {/**微软浏览器都不支持 Windows 7 和 8，提示下载 IE11事实上可以装 Edge 的 Windows 10 的 IE 已经是11也就是说，能看到升级提示的人的系统都用不了 Edge 而可以用的则都不会看到升级提示那把 Edge 放到这里是多余的吗？不，这是为了宣传 Windows 10 ，吸引用户今早升级系统**/browsersHtml +='<div class="' +classes +'" style="background-image:url(' +bgimg_gray+')">\<a href="#" οnclick="alert(\'Microsoft Edge 专为 Windows 10 打造！请选择其他浏览器。\');return false;" class="iealwn-browser-link" style="color:#777">' +browsers[i]["name"] +'</a>\<a href="https://www.microsoft.com/zh-cn/download/internet-explorer-11-for-windows-7-details.aspx" class="iealwn-browser-dlink" target="_blank" title="下载' +browsers[i]["name"] +'">IE11</a>\</div>';} else {browsersHtml +='<div class="' +classes +'"style="background-image:url('+bgimg+')">\<a href="' +browsers[i]["url"] +'" class="iealwn-browser-link" target="_blank">' +browsers[i]["name"] +'</a>\<a href="' +browsers[i]["durl"] +'" class="iealwn-browser-dlink" target="_blank" title="点击下载' + browsers[i]["name"] +'">下载</a>\</div>';}}var currentBrowserHtml = "";currentBrowserHtml +='<div class="iealwn-text iealwn-text-muted">您使用的不是IE浏览器？是 ';var i = 1;var count = 0;for (var prop in _iealwn.browserNames) {count++;}for (var browser in _iealwn.browserNames) {currentBrowserHtml +='<span class="touchcss-g" οnclick="browserAlert(\'' +browser +"')\">" +_iealwn.browserNames[browser] +"</span>";if (i < count) {currentBrowserHtml += "、";}i++;}currentBrowserHtml +=" 其中一个吗？若是如此，您暂可不必升级，点击名称查看教程并按步骤切换至极速内核也可正常访问。</div>";var alertHtml ='<div id="iealertwn"><div class="iealwn-wrap"><div class="iealwn-box"><div class="iealwn-main">\<div class="iealwn-line">\<a href="https://support.dmeng.net/kill-old-versions-of-ie.html?utm_source=iealwn" target="_blank">旧版 Internet Explorer 升级提示弹窗</a>\</div>\<div class="iealwn-notice">\<div class="iealwn-title iealwn-title_alert">危险！您正在使用的IE浏览器已过期，请立即升级！</div>\<div class="iealwn-text">自2016年1月12日起，微软不再为IE11以下版本提供相应支持和更新。没有关键的浏览器安全更新，您的电脑可能易受有害病毒、间谍软件和其他恶意软件的攻击，它们可以窃取或损害您的业务数据和信息。为确保您的电脑安全，请停止使用IE的过期版本！</div>\<div class="iealwn-browser_alert" id="_iealwn_browserAlert">\<div class="iealwn-title iealwn-title_horn">是时候升级你的浏览器了！</div>\<div class="iealwn-text">如您坚持使用当前浏览器访问本站，你将看到排版错误、功能不全、无法正常使用的网页，甚至是满屏乱码。请使用更先进的浏览器访问。</div>\</div>\<div class="iealwn-browseralert_new" id="_iealwn_browserAlert_new">' +currentBrowserHtml +'</div>\<div class="iealwn-title iealwn-title_browser">下载更先进的浏览器</div>\<div class="iealwn-browsers" id="iealwn-browsers">' +browsersHtml +'<div class="iealwn-browser-clear"></div>\</div>\<div class="iealwn-title iealwn-title_faq">为什么会出现这个弹窗？</div>\<div class="iealwn-text">如果你不知道升级浏览器是什么意思，请请教一些熟练电脑操作的朋友。如你是网站技术人员，请加入旧版 Internet Explorer 淘汰行动。<a href="https://support.dmeng.net/kill-old-versions-of-ie.html?utm_source=iealwn" target="_blank">了解详情</a></div>\</div>\<div class="iealwn-line">\<span class="iealwn-close" id="closetouch" οnclick="closetouch()">我已了解风险，并关闭弹窗</span>\</div>\</div></div></div></div>';var alertDiv = document.createElement("div");alertDiv.id = "_iealwn_div";alertDiv.innerHTML = alertHtml;document.getElementsByTagName("body")[0].appendChild(alertDiv);// 延迟判断，因为傲游浏览器的属性是异步注入setTimeout(function () {browserAlert();}, 1000);
}function browserAlert(key) {if (!key) {browser = _iealwn.browser;} else {browser = key;}var names = _iealwn.browserNames;var alertHtml = "";if (!!names[browser]) {var browserName = names[browser];var imgHeight = _iealwn.imgHeight[browser];alertHtml +='<div class="iealwn-title iealwn-title_horn">您使用的是' +browserName +'吗？</div>\<div class="iealwn-text">您正在使用的可能是' +browserName +'IE兼容模式。若是如此，您暂可不必升级，按下图所示步骤切换至极速内核也可正常访问。（示意图仅供参考，浏览器不同版本可能有差异）</div>\<div class="iealwn-text"><img class="iealwn-guide" src="' +_iealwn.dir +"/images/switch-" +browser +'.png" width="586" height="' +imgHeight +'" style="width:586px !important;height:' +imgHeight +'px !important" alt="示意图" title="如图片未显示，请点击右键选择 显示图片(H)"></div>\';alertHtml +='<div class="iealwn-text iealwn-text-muted">其他双核浏览器切换极速内核示意图（点击名称查看）：';for (var key in names) {if (key == browser) continue;alertHtml +='<span class="touchcss" οnclick="browserAlert(\'' +key +"')\">" +names[key] +"" +"</span> ";}alertHtml += "</div>";document.getElementById("_iealwn_browserAlert").style.display = "none";document.getElementById("_iealwn_browserAlert_new").innerHTML = alertHtml;}
}function fixload(num) {if (document.getElementById("_iealwn_div") === null &&document.getElementsByTagName("head").length > 0 &&document.getElementsByTagName("body").length > 0) {load();} else {if (num > 1) {setTimeout(function () {fixload(num - 1);}, 1000);}}
}
