vue项目打包在本地服务器上线

vue项目如何打包在本地服务器上线?

看到网上的解释都太复杂,整理一份通俗易懂的留给自己看。。。。。

___首先通过框架自带指令将项目打包

npm run build

___在vscode中的控制台打包完成后应该是会展示出下面如图↓
___在CMD后台中运行的结果如下图在这里插入图片描述

完成打包以后,在项目中会看到新增了一个dist的文件夹,这个就是打包好的项目文件在这里插入图片描述

完成上面的步骤以后,打开电脑的控制面板

__首先,查看控制面板中的程序
在这里插入图片描述
然后点开程序和功能中的启用或关闭Windows功能选项
在这里插入图片描述
在弹出的窗口中找到internet information services选项并全选
这个选项
完成以上步骤以后
!!!重点来了。
!!!重点来了。
!!!重点来了。
!!!重点来了。
完成以上步骤以后,回退到控制面板。找到系统和安全,点进去
在这里插入图片描述
找到系统和安全中的管理工具
在这里插入图片描述
然后找到Internet Information Services (IIS)管理器
在这里插入图片描述
点进去以后,展开左边菜单中的折叠选项,展开网站选项
我的这个wwwwwwee是随意创建的。
在网站选项上右键找到一个添加网站
按照操作,如果无误的话会弹出一个弹框。
在这里插入图片描述

这里该注意的是第一个网站名称(建议用英文开头),然后物理路径里面填写的是刚才项目打包以后的dist文件夹(物理路径中如果有中文的话可以吧dist文件拖到一个没有中文的路径内,因为物理路径有时候可能会解析不了导致页面打不开的问题),然后在 IP地址里面选择一个默认的Ip地址(例如:192.168.1.1)然后端口就可以根据要求设置,如果个人测试的话随便加两位就可以(例如:8080)然后点击确定就可以 了。

完成上面的步骤就算是完成99%了,最后一步,在右边栏里面会看到浏览网站就是项目绑定的网站,如果需要用移动设备测试,首先保证测试的移动设备与本地服务器的电脑也就是本机在同一网段内,然后把完整的地址输入到移动设备中浏览器的地址栏(例如:http://172.20.10.2:8011/)
在这里插入图片描述

以上就是完整的一个方法与步骤,后期不定期更新真机测试中遇到的报错和遇到的比较棘手的问题。

在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值