前端实习实践记录则说明openresty下载并启动成功。这里附上几个常用的nginx配置命令： =开头表示精确匹配，不能

本地代码调试线上页面
使用nginx配置https访问和跨域
使用whistle，eruda远程调试移动端h5页面
使用easy-mock-docker配置mock服务
配置git-cz
vscode配置

1.本地代码调试线上页面

首先，提前安装好以下软件：

switchhost(用来方便快速切换host)
openresty(基于nginx和lua的web平台)
mkcert(用来方便快速配置https证书)

开始：下载好openresty后，在openresty的目录下可以看到nginx.exe，在此目录下打开命令行执行start nginx命令后，打开浏览器访问http://localhost/，若出现则说明openresty下载并启动成功。这里附上几个常用的nginx配置命令：

start nginx # 启动nginx
nginx -s quit # 退出nginx
nginx -s reload # 重启nginx，当nginx配置文件改动以后需要重启
nginx -t # 检查nginx配置文件语法是否正确
taskkill /IM nginx.exe /F # windows下kill掉所有跟nginx.exe相关的进程

第二步：我们需要对conf目录下的nginx.conf进行修改，在文件末尾添加include host/file.example.conf 在conf/host目录下新增file.example.conf文件 nginx.conf 为你的file.example.conf添加以下配置内容，可以参考复制nginx.conf 记得使用nginx -t检查你修改后的配置文件是否语法正确关于location的配置知识点：

以/ 通用匹配, 如果没有其它匹配,任何请求都会匹配到
=开头表示精确匹配，不能带任何多余的字符串。
^~ 开头表示uri以某个常规字符串开头，不是正则匹配
~ 开头表示区分大小写的正则匹配;
~* 开头表示不区分大小写的正则匹配

接下来打开预先安装好的软件switchhost修改本地host：最后浏览器访问file.example.com，出现如下截图可知配置成功！

2.nginx配置https访问和跨域

在前面的基础上，我们在nginx.conf文件中添加一行include host/ssl-file.example.conf 在conf/host目录下新增ssl-file.example.conf文件在conf目录下新建文件夹ssl 在ssl-file-example.conf文件中添加以下内容：

server {
	listen			443;
	index			index.html home.html;
	server_name		file.example.com;
	
	root			D:/example/dist/;
	
	ssl on;
	ssl_certificate ssl/file.example.com+1.pem; # 需要生成的文件
	ssl_certificate_key ssl/file.example.com+1-key.pem; # 需要生成的文件
	ssl_session_timeout 5m;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
	ssl_prefer_server_ciphers on;
	
	
	
	location	/	{
		root	D:/example/dist/;
		autoindex	on;
		autoindex_exact_size	off;
		autoindex_localtime		on;
	}
	
	location	^~ /f/	{
		alias	D:/example/dist/;
		autoindex	on;
		autoindex_exact_size	off;
		autoindex_localtime		on;
	}
	
	location	^~ /f/h5/vue/	{
		alias	D:/example_vue/dist/;
		autoindex	on;
		autoindex_exact_size	off;
		autoindex_localtime		on;
	}
}

接下来，使用mkcert软件，mkcert使用教程请移步github地址

./mkcert.exe -install

./mkcert.exe file.example.com 127.0.0.1

将mkcert生成的file.example.com+1.pem和file.example.com+1-key.pem移动到conf/ssl目录下，先nginx -t然后nginx -s reload 使用浏览器访问https://file.example.com，如出现如下截图则说明配置https成功：

通过nginx代理转发实现跨域：在开发过程中，我们可能会遇到域名和接口的域名不相同等情况，需要进行跨域，我们可以在相应的配置文件中添加location，比如：

location	^~	/api/ {
		proxy_pass	https://www.baidu.com/;
	}

然后使用浏览器访问https://file.example.com/api/，可以看到浏览器呈现的是百度的首页。

3.使用whistle，eruda远程调试移动端h5页面

4.使用easy-mock-docker配置mock服务

5. 配置git-cz

6. vscode相关

内网环境下vscode插件离线安装：

进入vscode marketplace
点击Download Extension，下载下来的是.vsix格式文件
安装VS Code时配置好了环境变量，在控制台执行 code --install-extension your-extension-name.vsix即可安装

扩展插件：

Vetur
ES6 code snippet：打印语句可以简写成clg，然后按tab补全
Auto Rename Tag：自动修改结束标签
Bracket Pair Colorizer：彩虹括号
ESLint
Prettier
Gitlens
Live Server
Markdown Preview
leetcode
Copy Relative Path：解决windows下文件相对路径的斜杠问题
Remote SSH
vscode-icons：图标
One Dark Pro：主题

`settings.json`：快速打开`settings.json`的方法是先按`ctrl shift p`打开命令面板，输入`open settings`

{
    "files.autoSave": "onFocusChange", // 失去焦点时自动保存文件
    "git.path": "D:\\Program Files\\Git\\cmd\\git.exe", // 配置git终端
    "terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe",
    "workbench.iconTheme": "vscode-icons",
    "extensions.ignoreRecommendations": false,
    "files.associations": {
        "*.wpy": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "wxml": "html",
        "markdown": "html" // 在md文件里面可以快速编写html代码
    },
    "emmet.triggerExpansionOnTab": true,
    "minapp-vscode.disableAutoConfig": true,
    "window.zoomLevel": 0,
    "editor.renderControlCharacters": true, // 显示空格及控制字符 
    "editor.renderWhitespace": "all",
    "editor.tabSize": 2, // 修改tab为2个space
    // 限制列数为120，会绘制一根限制线
    "editor.rulers": [
        120
    ],
    "javascript.updateImportsOnFileMove.enabled": "always", // 自动更新模块的导入
    "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"] // 扩展插件的配置
}

前端实习实践记录