vue项目如何打包在本地服务器上线?
看到网上的解释都太复杂,整理一份通俗易懂的留给自己看。。。。。
___首先通过框架自带指令将项目打包
npm run build
___在vscode中的控制台打包完成后应该是会展示出下面如图
___在CMD后台中运行的结果如下图
完成打包以后,在项目中会看到新增了一个dist的文件夹,这个就是打包好的项目文件![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8716abea9153726786a3c50ab6861e0c.png)
完成上面的步骤以后,打开电脑的控制面板
__首先,查看控制面板中的程序
然后点开程序和功能中的启用或关闭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/)
以上就是完整的一个方法与步骤,后期不定期更新真机测试中遇到的报错和遇到的比较棘手的问题。