wan-wing / blog Goto Github PK

0.0 1.0 0.0 0 B

blog's People

Watchers

blog's Issues

src/lib/rem.js

`// 设置 rem 函数
function setRem() {
    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / 90 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}`

/* 
### 根据750宽度的设计稿计算font-size，即1rem = 100px;
*/
html {
    font-size: calc(100vw / 7.5);
}

设计稿：1440 计算 100/14.4 = html {
font-size: 6.94444444vw;
}

// ### 设置最大字体大小

@media screen and (max-width: 1200px) {
  html {
    font-size: 12px;
  }
}

@media (max-width: 300px) {
  html {
    font-size: 12px;
    /* 设置最小字体大小 */
  }
}

###配置pxtorem 在postcss.config.cjs

    module.exports = {
    plugins: [
      require('postcss-pxtorem')({
        rootValue: 16, // 根元素字体大小。你可以根据实际项目需求进行调整。
        propList: ['*'], // 可以从px转换为rem的属性列表，['*']表示所有属性都包括。
        // 其他配置项...
      })
    ]
  };

浏览器缓存对项目的影响？

1.为什么不同域名下面部署的不同的项目，但是A部署之后，两个域名都显示的A项目，但是在B部署之后两个项目都显示的B项目，是因为NGINX 配置吗，还是和缓存有关系

Origin 在 request Headers 中是什么意思

在HTTP请求头（Request Headers）中，Origin标头表示请求的来源地址。这个值通常用于跨源资源共享（CORS）场景中，用于标识请求的发送方是哪个源（Origin）。

Origin标头的值通常为请求的源URL scheme（协议）、主机名和端口号。例如，如果一个请求来自http://example.com，则Origin标头的值为http://example.com。

在跨源请求中，浏览器会自动将Origin标头包含在请求中，以便服务器判断是否允许该请求访问其资源。服务器可以通过检查Origin标头来决定是否允许跨源请求。如果服务器允许跨源请求，它会在响应头中包含Access-Control-Allow-Origin标头，其值可以是允许的源列表，也可以是通配符*，表示允许来自所有源的跨源请求。

Referer

Referer标头主要用于分析、日志记录和防盗链。服务器可以使用Referer标头来跟踪用户是从哪个页面访问的当前资源，以及识别请求是否来自站外。此外，一些网站使用Referer标头来防止未经授权的内容被其他网站直接链接。

在HTTP请求头（Request Headers）中，Host标头指定了请求的目的主机名和端口号。Host标头是HTTP/1.1协议中的强制性标头，也就是说，每个HTTP请求都必须包含Host标头。

Host标头的值通常为请求的目标URL scheme（协议）、主机名和端口号。例如，如果一个请求发送到https://example.com，则Host标头的值为example.com。

Host

在生产环境中，Host标头通常由客户端自动设置，无需手动配置。当您在浏览器中输入URL时，浏览器会自动将Host标头设置为您输入的域名。在测试环境中，如果您使用域名访问服务器，则同样需要设置Host标头。但是，如果您使用IP地址访问服务器，则可能需要手动设置Host标头。

总之，无论您是在本地生产环境还是测试环境中，只要您使用域名访问服务器，则Host标头都是必需的。

：authority

在HTTP请求头（Request Headers）中，:authority标头（请注意，前面有一个冒号）表示请求的权威认证信息。这个值通常为请求的目标URL scheme（协议）、主机名和端口号。与Host标头类似，：authority标头也包含了这些信息，但它们使用场景和语义有所不同。

：authority标头是由HTTP/2协议引入的，用于表示请求的目标服务器权威认证。在HTTP/2中，：authority标头用于建立HTTP/2连接，并在整个连接过程中保持不变。而Host标头在HTTP/1.1中用于指定请求的目标主机，但在HTTP/2中，Host标头可以用于特定的请求，例如在跳转场景中。

在现实生活中，您可能会在HTTP/2环境中遇到：authority标头，例如在HTTP/2性能分析和调试中。然而，在大多数情况下，您可能会更多地遇到Host标头，特别是在HTTP/1.1和HTTP/2的混合环境中。

Nginx 配置指令 vue3 和vue2 Nginx都需要配置 try_files $uri $uri/ /collection-web/index.html;吗

location /collection-web/ {
alias /etc/nginx/collection-web/;
index index.html index.htm;
try_files $uri $uri/ /collection-web/index.html;
}

是的，无论是Vue 2还是Vue 3，如果你的Vue应用是一个单页应用（SPA），并且使用HTML5历史模式（由Vue Router管理），在Nginx服务器上都需要配置try_files $uri $uri/ /collection-web/index.html;。这个配置对两个版本的Vue应用都是适用的。

为什么需要这个配置

在Vue单页应用中，无论是Vue 2还是Vue 3，路由都是由前端（浏览器端）的JavaScript控制的，而不是服务器端。这意味着实际上没有多个页面，而是单个页面（通常是index.html）上的不同视图。

当用户直接访问一个特定路由（比如，通过输入URL或者页面刷新），服务器需要返回应用的入口文件index.html，然后Vue Router接管并根据URL的路径展示正确的组件。但是，如果没有try_files指令，Nginx会尝试寻找匹配该URL路径的实际文件，通常找不到，因此返回404错误。

try_files指令的作用

try_files $uri $uri/ /collection-web/index.html;这行配置的作用是：

首先尝试直接访问请求的URI对应的文件（$uri）。
如果没有找到，尝试将请求视为一个目录并访问该目录下的index.html（$uri/）。
如果这些都不存在，就将请求重定向到/collection-web/index.html。
这保证了无论用户访问的是哪个路由，服务器都能正确地返回Vue应用的入口文件，然后由前端路由处理后续的视图展示。

因此，为了确保Vue单页应用无论在Vue 2还是Vue 3下都能正确处理路由，你需要在Nginx配置中添加这个try_files指令。

预检请求，请求头中方 token has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

https://blog.csdn.net/qq_41359758/article/details/115031701
由于在后端拦截器中拦截了所有的请求，只有检查到请求头中真实存在的token值才会放行请求，这就导致了浏览器发起的预检请求也被拦截了（由于该请求头中没有携带自定义的 Authorization 属性，所以被拦截），最终导致正式的 XMLHttpRequest 请求没有发出去。

https://blog.csdn.net/fuzhongbin/article/details/106239664

vue3+vite配置代理

import { loadEnv } from 'vite';

target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,
vite.config.ts 识别不了process.env，
vue 2 vue-cli 使用process.env
vue3 +vite 使用import.meta.env

[(https://blog.csdn.net/qq_43592064/article/details/122680087)]

`export default ({mode}) => {
  return defineConfig({
    plugins: [vue(),
      // dotenv()
    ],
    resolve: {
      alias     
      // alias: {  // 这里就是需要配置resolve里的别名
      //   "@": resolve(__dirname, "src"), // path记得引入
      //   // 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
      // },
    },
    // 开发环境
    define: {
      'process.env': {}
    },
    server: {
      host: 'localhost',
      // host: '0.0.0.0',
      port: 8080,
      proxy: {
          '/api': {
              target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,
              changeOrigin: true,
              rewrite: path => path.replace(/^\/api/, ''), // 设置重写路径, 去掉path

          },
      }
    },
  })
}`

react 报错提醒 Ant Design (antd) React 库时遇到了关于 findDOMNode 被弃用的警告，

https://cloud.tencent.com/developer/article/2032828
这通常意味着您使用的 Ant Design 版本中的某些组件还在内部使用 findDOMNode。，React 团队已经宣布在未来的版本中将移除 findDOMNode，因为它违反了 React 的未来方向，特别是与异步渲染的兼容性。
<React.StrictMode>//移除 <App /> </React.StrictMode>,//移除

redux的提问

redux是什么？有什么功能？
redux 的store 和state 有什么关系和区别？
redux是怎么更新数据的？
react- redux 是干什么的有什么功能？
provider是什么从哪里来的？
provider 和Connect 有什么关系？
provider和redux有什么关系？
redux 的state 和react的 state 有什么区别？
Connect 是做什么用的？
什么是redux 的插件？
Connect 做了什么？
核心 @@ 单项数据流？
props 是单向的只可以父传子？
v-model 是双向数据绑定？
action 和reducer 的区别？
action的对象是用户。用户触发动作？
reducer 的对象是state ？
Reducer 是state的手术刀？
react 中的state 和redux中的store？

shell 查看部署的服务器的IP地址

ifconfig | grep 'inet ' | awk '{print $2}' > ip_address.txt

输出 IP 地址到构建日志中

echo "服务器的 IP 地址是："
cat ip_address.txt

唤醒app，跳转deeplink

https://blog.windstone.cc/browser-env/hybrid/h52app.html#android-%E8%B7%B3%E8%BD%AC%E5%88%B0%E5%BA%94%E7%94%A8%E5%B8%82%E5%9C%BA

vue多页面入口配置

https://blog.csdn.net/snowball_li/article/details/132154902?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-132154902-blog-123864755.235^v43^pc_blog_bottom_relevance_base1&spm=1001.2101.3001.4242.2&utm_relevant_index=4

https://blog.csdn.net/weixin_63513903/article/details/124571449

build: {
      outDir: 'dist', // 指定输出目录为 dist
      assetsDir: 'static', // 指定静态资源目录为 static
      rollupOptions: {
        input: {
          about: path.resolve(__dirname, 'about.html'), // 另一个入口文件  

          index: path.resolve(__dirname, 'index.html'), // 主入口文件
        }
      }
    }

index.html

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

about.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>about AntPesa</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/about.js"></script>
  </body>
</html>

main.js

import App from './App.vue'
import router from './router/mainRouter.js';
const app = createApp(App);
  // 使用路由11
app.use(router);
// app.mount('#app');
console.log('import.meta.env.VITE_BASE_URL', import.meta.env.VITE_BASE_URL);
app.mount('#app')
```;

about.js
同上

vite 5 打包报错

https://blog.csdn.net/weixin_45324044/article/details/128497307

encodeURIComponent

encodeURIComponent 是一个JavaScript函数，用于对URI（统一资源标识符）的某些部分进行编码，以便可以将它们安全地嵌入到URI中。当你需要在URI中包含特殊字符时，这个函数非常有用，因为直接在URI中使用这些字符可能会破坏其结构或引起错误的解释。

功能和原理
encodeURIComponent 函数会对除了字母、数字以及 -、_、.、!、~、*、' 和 (、) 这些字符之外的所有字符进行编码。它使用二进制UTF-8序列来表示字符，并对每个字节进行百分比编码。


const text = "这是一段测试文本！%&*";
const encodedText = encodeURIComponent(text);
console.log(encodedText); // 输出: %E8%BF%99%E6%98%AF%E4%B8%80%E6%AE%B5%E6%B5%8B%E8%AF%95%E6%96%87%E6%9C%AC%EF%BC%81%25%26*

使用场景
在URL中传递数据：当你的数据包含特殊字符或保留字符时，使用 encodeURIComponent 来确保这些字符不会影响URL的结构。
在GET请求中发送数据：在GET请求的查询字符串中，任何键或值都应该使用 encodeURIComponent 来编码，以避免服务器解析错误。
encodeURIComponent 是一个强大的工具，用于确保数据在互联网通信中的安全性和正确性。

预检请求前端Content-Type: application/json 会触发预检请求。根据 CORS 规范，只有以下三种 Content-Type 类型被认为是简单请求的一部分，不会触发预检请求：

https://www.cnblogs.com/gaolight/p/14446100.html
https://blog.csdn.net/java0506/article/details/120620447
跨域请求避免OPTIONS请求（预检请求）
https://blog.csdn.net/qq_15957557/article/details/118522689
https://blog.csdn.net/fuzhongbin/article/details/106239664
跨域
https://blog.csdn.net/BushQiang/article/details/80204742?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-80204742-blog-119444514.235^v43^pc_blog_bottom_relevance_base1&spm=1001.2101.3001.4242.1&utm_relevant_index=3

https://github.com/a1029563229/micro-front-template 微前端架构模板