美文网首页网页前端后台技巧(CSS+HTML)Web前端开发笔记
【Vue-cli3】打包 -> 在本地服务器跑起来

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

作者: 德育处主任 | 来源:发表于2019-05-20 22:55 被阅读13次
    微信订阅号: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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/onhrzqtx.html