前端小知识点

0.0.0.0 和 127.0.0.1 的区别

webpack配置host为0.0.0.0 可以做移动端开发，使局域网内其他设备可以访问到本地的webpack服务。
其他设备访问127.0.0.1时，只能访问到其他设备本机，不能访问到局域网内的其他设备。
其他设备访问访问的时候ip是服务所在机器的ip即可
服务所在机器可以通过 127.0.1访问本机服务

error:0308010C:digital envelope routines::unsupported

dev: set NODE_OPTIONS=--openssl-legacy-provider

config.resolve.fallback

## 关键词 **https-browserify**
config.resolve.fallback 是 Webpack 5 中引入的一个配置项，用于处理在浏览器环境中不可用的 Node.js 核心模块。在 Webpack 5 之前，这些核心模块通常是通过 node 字段或 resolve.fallback 的前身 resolve.alias 来处理的。但在 Webpack 5 中，为了更好地支持现代 JavaScript 生态系统，特别是那些依赖于 Node.js 核心模块的库，resolve.fallback 提供了一种更灵活和明确的方式来处理这些模块。

移动端响应式 postcss-plugin-px2rem

```
"autoprefixer": "^7.1.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-plugin-px2rem": "^0.8.1",
"postcss-url": "^7.2.1",
"lib-flexible": "^0.3.2"
```
先安装这几个依赖
根目录 创建postcss.config.js 文件
```js
    // https://github.com/michael-ciniawsky/postcss-load-config
    module.exports = {
    plugins: {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        autoprefixer: {},
        "postcss-plugin-px2rem": {
        rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
        // unitPrecision: 5, //允许REM单位增长到的十进制数字。
        //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
        // propBlackList: [], //黑名单
        exclude: /node_modules/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
        // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小
        // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
        // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
        mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
        // minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
        },
    },
    };

```
html里添加
```js
    function load() {
        const rootFontSize = document.documentElement.clientWidth / 10
        document.documentElement.style.fontSize = rootFontSize + 'px'
    }
    load()
    window.onresize = load
```

rem 是相对 html 标签的 fontsize

浏览器默认字体大小 16px 谷歌最小显示 12px 再小了需要用 transform: scale(0.8)等等

设备像素 css 像素

vue-router 里 动态路由和正则表达式

```js
    const routes = [
    {
        path: 'ccc/:cust(\\d+)?/:name',
        component: SomeComponent
    }
    ];
    // 那么以下URL都将匹配这条路由：
    // /ccc/123/john —— cust 参数为 123，name 参数为 john
    // /ccc/jane —— cust 参数未提供（为 undefined），name 参数为 jane
    // 而像 /ccc/abc/john 这样的URL不会匹配，因为 cust 参数不是由数字组成。
```

vue 强制刷新页面 不会调用 unmounted 等钩子函数

资金流向图 可以用 echarts 做

一个非常坑的知识点, element-plus 文档 里的日历组件 自定义内容

插槽名称 文档里是 date-cell ,但是 不好使 得写成dateCell , ** 坑了 **

options 请求 一般会在 跨域资源共享（CORS）预检 时发送

当浏览器需要发送一个跨源的非简单请求（例如，使用了自定义头部或采用了除 GET、POST 或 HEAD 之外的方法）时，它会先自动发出一个 OPTIONS 请求作为预检。这个预检请求询问服务器是否允许即将到来的实际请求。只有当预检请求成功，并且响应中包含了正确的 CORS 相关头部信息（如 Access-Control-Allow-Origin），浏览器才会发出实际的请求。

vue 项目 devServer.proxy 配置

Error : Route "should be "/"

这个是addRoute的时候报的错,路由配置错误

vite.config.js 配置

其中base 的意思是 开发或生产环境服务的公共基础路径

/_ @vite-ignore _/

/* @vite-ignore */ 是 Vite 中的一个特殊注释，用于忽略特定的代码块或文件，使其在构建过程中不被处理。
在动态路由 的时候使用它,那么打包的时候 vite 会忽略掉这个文件/文件夹,不会被打包.所以打包后点击相应的菜单会请求 xxx.vue

export function lazyLoading(menuUrl) {
  return () =>
    import(/* @vite-ignore */ `/src/views${menuUrl}/index.vue`).catch((e) => {
      // 未找到组件
      // console.error(`页面加载错误，未在'${menuUrl}'下找到有效页面！`)
      return import("@/components/ErrorPage.vue");
    });
  // }
}

上面的代码 不会打包 /src/views${menuUrl}/index.vue 所以点击菜单会请求这个文件,然后404.
去掉 /* @vite-ignore */ 然后 通过 import.meta.glob("@/views/**/*.vue")

const modules = import.meta.glob("@/views/**/*.vue");
let url = modules[`/src/views${menuUrl}/index.vue`];
url();

向响应式数组中 push 一个非响应式数据时，Vue 会将其转换为响应式数据。从响应式数组中取出的数据是响应式的（如果它是一个对象或数组）。