【Vue-cli3】打包 -> 在本地服务器跑起来

微信订阅号：Rabbit_svip

用标题糊弄一下。

其实主要想讲 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”。

微信订阅号：Rabbit_svip 微信订阅号：Rabbit_svip

这个问题在 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地址。

微信订阅号：Rabbit_svip

手机要和电脑连同一个网络。
在手机浏览器输入IP地址 + 端口号（我刚刚设置的端口号是8081，请根据自己设置的端口号自行输入）

微信订阅号：Rabbit_svip