首页 > 编程知识 正文

vue项目怎么发布到服务器,vue项目部署到服务器

时间:2023-05-03 09:20:17 阅读:59549 作者:679

需求:

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上。

如果上述有错误,谢谢您的朋友指出来。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。