前端工作日常问题和易忘点记录

背景

记录下日常遇到的问题和简便操作

学到了

1. ant-design 中的图标应用

@ant-design/icons-vue提供了很多图标组件
在 vue 组件中使用可以直接通过:

import { StepBackwardOutlined } from "@ant-design/icons-vue";

// 使用
<StepBackwardOutlined />;

但在某些情况下, 比如菜单组件, 侧边栏组件, 想要直接通过className来获取图标就可以参考文档中Custom Font Icon

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
	scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});
export default defineComponent({
	props: {
		className: String,
	};
	setup() {
		return () => <MyIcon :type="className" />;
	},
});

官方提供了这样的组件, 其中type属性即类名. createFromIconfontCN的scriptUrl参数可以在iconfont.cnsh 获取自定义的 js 链接.
也可以不传入scriptUrl, 直接在入口 html 文件中全局引入, 在博主项目中便是这样设置的.

const MyIcon = createFromIconfontCN({
  scriptUrl: "",
});

<script src="<%= BASE_URL %>iconfont.js"></script>

根据路由生成简单菜单栏的简单路由示例, 其中通过设置meta的icon属性作为图标的className:

import { RouteRecordRaw } from "vue-router";

const ROUTES: Array<RouteRecordRaw> = [
  {
    path: "/content/management",
    name: routeName,
    component: () =>
      import(
        /* webpackMode: "lazy" */ /* webpackPrefetch: true */ /* webpackChunkName: "prom-material" */ "@/views/list.vue"
      ),
    meta: {
      title: "标题",
      icon: "icon-folder-fill",
    },
  },
];

2. 部署 vue 项目后对 nginx 的进一步了解

首先需要搞清楚nginx中的root和alias, 区别在于:

1. 对于location后面的 uri 的解析
   root的处理结果为 root 路径+请求的 uri 路径
   alias的处理结果为 alias 路径覆盖 location 路径+请求 uri 剩余的路径
2. alias结尾必须要带上/, root结尾则可有可无.

对于以下 nginx 配置:

location /editor/ {
	root /www/data/dist/;
}

如果请求 URI 为/editor/abc, 最终 nginx 查找的路径为/www/data/dist/editor/abc.

对于以下 nginx 配置:

location /editor/ {
	alias /www/data/dist/;
}

如果请求 URI 为/editor/abc, 最终 nginx 查找的路径为/www/data/dist/abc.

nginx 中的index, nginx 在上述的种种路径中没找到对应的文件, 默认情况下会在后面加上个/index继续找/www/data/dist/abc/index, 可以通过配置index告诉 nginx index 的含义.

对于以下 nginx 配置:

location /editor/ {
	alias /www/data/dist/;
	index index.html index.shtml;
}

请求 uri 为/editor/abc, nginx 在/www/data/dist/abc路径找不到文件时, 会继续找/www/data/dist/abc/index.html及/www/data/dist/abc/index.shtml, 还是找不到则返回404.

nginx 中的autoindex, 是否允许查看文件夹, 默认是off.

对于以下 nginx 配置:

location /editor/ {
	alias /www/data/dist/;
	autoindex on;
}

请求 uri 为/editor/abc, nginx 如果发现/www/data/dist/abc是个文件夹, 浏览器会返回目录结构类似下图:

最后就是记录使用history模式 vue-router 的 vue 项目npm run build后的构建产物发布到线上机器后的 nginx 配置.
首先我们知道默认情况下 vue 是 SPA 单页面应用, 其中的路由跳转都是通过 H5 提供的history.pushState()进行跳转. 假设构建产物现在发布在/www/data/dist目录, 目录结构:

dist
├── css
├── favicon.ico
├── iconfont.js
├── img
├── index.html
└── js

对于以下路由:

const ROUTES: Array<RouteRecordRaw> = [
  {
    path: "/dashboard/list",
    component: () => import(""),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: ROUTES,
});

如果是根路径下的 nginx 配置, 网上都是教你这么配的:

location / {
	alias /www/data/dist/;
	try_files $uri/ /index.html;
}

请求 uri 为/dashboard/list, 我曾经以为的 nginx 解析逻辑是:

1. 匹配到/, 查找/www/data/dist/dashboard/list
2. 没找到对应文件, 后面加上/index找, 还是没找着
3. 通过try_file一次查找/www/data/dist/, /www/data/dist/index.html
4. 找到对应文件返回给浏览器
5. 浏览器通过 html 引入的 js 中的路由规则跳转到/dashboard/list

于是在新项目以下路由也使用用了对应 nginx 配置:

const router = createRouter({
  history: createWebHistory("/editor"),
  routes: ROUTES,
});

非跟路径的 nginx 配置:

location /editor/ {
	alias /www/data/dist/;
	try_files $uri/ /index.html;
}

事实是这样配置直接访问 uri 为/editor/dashboard/list时会返回404, 原因是 nginx 的try_file属性的 N 个值中, 前面 N-1 个值的搜索逻辑和上述第 3 点一致, 但是对于第 N 个值, nginx 会进行内部重定向, 例子中即会对/index.html重新进行匹配, 但是并没有对location / {} 的配置, 所以得到 404 结果.

正确的 nginx 配置类似:

location /editor/ {
	alias /www/data/dist/;
-   try_files $uri/ /index.html;
+   try_files $uri/ /editor/index.html;
}

根据上面的分析, 我们知道 nginx 的try_files对/editor/index.html内部重定向, 重新匹配location /editor/ {} 拿到index.html, 返回给浏览器, 通过 vue-router 正常路由跳转.

查找 StackOverflow 时发现一种写法, 也是好使的, 不清楚内部原因, 希望有了解的同学能解释一下

location /editor/ {
	alias /www/data/dist/;
	try_files $uri/ /index.html last;
}

3. tar 命令

• 项目发布上线需要编写打包的 shell 脚本给容器执行, 发现了个 tar 的参数--remove-files

tar --zcvf node_modules.tar.gz node_modules --remove-files

会在压缩成 tar.gz 包后将源文件夹删除, 就不用使用

tar --zcvf node_modules.tar.gz node_modules
rm -rf xxx

• 运行以下解压命令时报错 tar: write err

tar -zxvf node_module.tar.gz node_modules

tar 中-v是输出打包内容, 如果内容过长, 在某些机器上会报 tar: write err, 所以建议不加上这个参数

4. du -sh

ls -lh 可以显示当前文件夹下各文件大小, 但是显示文件夹大小并没有包含文件夹内部文件大小
du -sh用于显示文件夹及内部文件的总大小
-s只显示当前文件夹大小, 不显示文件夹内部文件夹大小;
-h以 K, M, G 这类容易理解的单位显示大小

5. multiple commit message in windows

windows 系统下默认不支持以下方式 commit 多行信息:

execSync(`git commit -m "${commitMessage}"`);

commitMessage如果为多行, linux/macos 下能够正常执行, windows 下会将除第一行外内容截断.

但是经过测试所有系统下都支持一下方式 commit 多行信息, commitMessage为单行信息:

execSync(`git commit -m "${commitMessage}" -m "${commitMessage}"`);

上述的"${commitMessage}"两边必须加上 quote.

6. .env

npm 库dot-env支持在本地配置.env文件, 并将键值挂载到process.env上, 但是对于某些符号字符, 默认会被截断导致读取配置时出错.
例如以下配置:

NODE_CONFIG_DIR=./env
NODE_ENV=development
SIGN=P2E#xWehFZc

读取SIGN时会将#后面的阶段, 导致SIGN的值变为P2, 这种情况在两边加上 quote 即可解决:

SIGN='P2E#xWehFZc'

iframe

// 父页面 -> 子页面, iframe为iframe DOM节点
iframe.contentWindow.postMessage(data, {});
// 子页面 -> 父页面
window.parent.postMessage(data, {});

问题

1. cannot find module pm2/lib/ProcessContainerFork.js

rm -rf ~/.pm2

2. 浏览器 img 请求图片时 403

html 文件<head>加上<meta name="referrer" content="no-referrer" />, 因为某些服务器会检测请求头的referer, 所以需要设置请求时不带上referer.

3. less 不支持 additionalData

less v4, less-loader v11 不支持additionalData, less v5, less-loader v12 之后新增 breaking change, 才支持additionalData, 才可以像sass-loader一样在 css 文件开头插入字符串.
vue.config.js 中配置

{
  css: {
    loaderOptions: {
      less: {
        addtionalData: `@import '@/style/global.less'`,
      }
    }
  }
}

reference

1. nginx 的 location、root、alias 指令用法和区别
2. vue-router, nginx and direct link
3. Nginx 的 try_files 参数保证能懂的讲解
4. cannot find module pm2/lib/ProcessContainerFork.js
5. Add line break to git commit -m from command line on Windows
6. Export .env with special characters