需求:
1、项目已完成,但尚未连接到正式后台(数据为本地json ) )。
2、将现有代码上线IIS
准备工作
1、部署IIS服务器
2、生成需要项目执行build部署的文件
步骤1 :复制文件
将build之后的文件(dist文件夹)复制到IIS站点文件所在的目录中
注意:
复制时不一定要复制整个dist文件夹,也可以复制里面的内容。 这需要看自己的需求。 如果你不明白,你可以和我一样。
步骤2 :在IIS中创建新站点
在站点中,单击鼠标右键,然后选择添加站点。
网站名称:根据用途或项目命名即可
“APP应用程序池”:部署前端项目。 这个可以无视。 请任意选择
内容目录:建议使用英语命名存储在网站上的路径
端口: web通常是80端口,但我的80已被其他项目占用,因此设置为8082
第三步:访问网站
要访问网站,可以直接从IIS界面的右侧浏览。 具体而言,请参照上图或直接输入浏览器的地址栏。 http://localhost:8082/
我想很多网友的文章到此结束,他们中很多人展示了成功的截图。 but,我这边一个接一个地破洞了。
我给你看看填补我漏洞的旅行吧?
第四步:填补漏洞
坑一、错误报告:网址拼写错误
打开网站检测页面错误,如下图所示。
错误内容:
看上面的图,暗示了URL的拼写错误。
如果设置了根访问权限“/”,则重定向到“/brand/company”,因此在上图中访问地址正确。
通过在IIS中打开代理并设置URL重写,可以解决上诉问题。 具体如下?
步骤1 :重写URL
2、制定规则
安装模块后,IIS将在图形界面中显示“URL重写”
双击后进入URL改写画面,在右上方单击“添加规则”。 具体如下图所示。
选择“空白规则”进入规则设置屏幕。 具体请参照下图。
注意:
名称:名称按功能命名即可
匹配URL :选择使用正则表达式,根据要求的api填写模式。 例如,我要求的api地址都是'/api/--- ',在这里填写^ (! (api ) ) ) $就可以了
请参阅上图,手动展开“条件”选项,添加“条件”,然后选择“不是文件”
手动展开“操作”选项,将“URL重写”设置为/index.html,然后单击右上角的APP应用程序以设置URL重写规则。
步骤2 :代理设置
1、下载必要的模块
在此处,必须配置两个模块: urlrewrite和应用程序请求路由。 urlrewrite是在步骤1中安装的。 需要下载应用请求路由,传送门: https://www.IIS.net/downloads/Microsoft/application-request
2、开启代理
遵循应用程序请求路由模块显示与IIS功能视图界面相关的设置,如下图所示。
双击进入设定画面,在右上方找到设定项目,点击进入。 具体请参照下图。
将Enable proxy设置为“打开”,然后在右侧单击“应用”即可。 具体请参照下图。
3、设置网址重写规则
名称:根据功能命名即可
匹配URL :使用“通配符”; 前端请求的地址为'/api/---- ',因此模式设置' *api/* '
条件:无需配置
操作:重写URL。 例如,我要求的实际地址是' https://blog.csdn.net/write ',在此填写' https://blog.csdn.net/{R:2} '。 具体填写实际情况
另外,规则数量需要根据自己要求的api地址类型的数量来设定
坑二:乱码
经过上述配置,再次打开网站后,即可正常访问。 具体请参照下图。
but,洞刚平,没办法。 开发的道路总是崎岖的。 兄弟要有坚强的心
解决方案:
在文件夹中,选择index.html,按鼠标右键,然后选择如何打开记事本
然后进入记事本,不需要任何编辑。 运行:将文件另存为,编码选择“UTF-8”保存即可
返回浏览器刷新页面后,文本将正常显示
坑3 :不显示页面数据
从坑二的最后一张图可以看到,页面上会显示空白。 这是因为没有要求数据。 具体地说,为什么呢?
这是上一个项目中用请求方式填补的漏洞。
在代码中回到真正的要求之路就行了
通过以上配置,vue项目成功部署到IIS上。
如果上述有错误,谢谢您的朋友指出来。