nuxt3.0学习-三、nuxt.config.ts配置、跨域处理以及浏览器适配处理

雨幕下的漫步

已于 2023-06-07 12:03:21 修改

阅读量6.3k

点赞数 4

分类专栏： nuxt3.0 文章标签：学习 vue 前端

于 2023-06-07 10:18:33 首次发布

本文链接：https://blog.csdn.net/weixin_42888568/article/details/130533216

版权

nuxt3.0 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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浏览器的兼容模式
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、10
    if (!!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，必须用这个蠢办法，因为要支持IE6
    if ((i + 1) % 3 == 0) classes += " iealwn-browser-mr0";
    //isXP && slug.match(/(chrome|firefox|edge)/g)

    if (isXP && slug.match(/(chrome|firefox|edge)/g)) {
      // 谷歌、火狐、微软浏览器都不支持 Windows XP

      var 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> &nbsp;";
    }
    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);
    }
  }
}