【Vue-cli3】打包 -> 在本地服务器跑起来
用标题糊弄一下。
其实主要想讲 IIS 搭建一个服务器。
本次在Win10上运行。
首先安装 IIS。
在开始菜单,搜索 “控制面板”
微信订阅号:Rabbit_svip
进入控制面板后,点击 “程序”
微信订阅号:Rabbit_svip点击 “启用或关闭 Windows 功能”
微信订阅号:Rabbit_svip选中 “Internet Information Services”,不用全选,点一下这个选项就会选择默认的。
微信订阅号:Rabbit_svip上一步按了 “确定” 之后,就会下载所需的东西
微信订阅号:Rabbit_svip下载并安装完成
微信订阅号:Rabbit_svip然后选择 “管理工具”
微信订阅号:Rabbit_svipage打开 “Internet Information Services(IIS)管理器”
微信订阅号:Rabbit_svip打开对应的目录,选中 “网站” 然后右键,“添加网站”
微信订阅号:Rabbit_svip输入网址名,然后确定网站的路劲,配置端口号(不要使用80端口)。(我这里是打包了一个vue项目的模板)
微信订阅号:Rabbit_svip配置完之后,点击右侧 “浏览 *:8081 (http)”
微信订阅号:Rabbit_svip项目就被打开了。
微信订阅号:Rabbit_svip我打包的这个项目是用了vue-router(vue的路由,前端路由的其中一种)。而且配置了 mode:'history'
。所以在点击到不是首页(url后面跟着 /about)的页面之后再按刷新,就会出现“404”。
这个问题在 vue-router 官网有解决方案。
首先在网站的根目录创建一个名叫 “web.config” 的文件,里面的内容是官网给的那段代码。
然后下载 “IIS UrlRewrite” ,官网也给了下载链接。
微信订阅号:Rabbit_svip点击 “Install this extension” 进行下载。
微信订阅号:Rabbit_svip安装
微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip安装完成就点击 “退出”
微信订阅号:Rabbit_svip之后再刷新网站,跳转到 “about” 页面,然后再刷新也不会出现什么问题了。
微信订阅号:Rabbit_svip如果需要在手机上打开这个网站。
首先要关闭防火墙。
微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip关闭 “防火墙” 之后,在命令行输入 ipconfig
查看本机的IP地址。
手机要和电脑连同一个网络。
在手机浏览器输入IP地址 + 端口号
(我刚刚设置的端口号是8081,请根据自己设置的端口号自行输入)