前端小知识点
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();
浙公网安备 33010602011771号