IIS部署VUE-CLI3.0 项目解决刷新404问题 - URL重写

在实际开发VUE项目中在进行好生产环境build及confg配置后我们会遇到这类问题

页面404、URL找不到、空页面、错误的返回等等
最近在开发后台管理类项目遇到上述场景,在此回顾分享
实操项目为iview-admin cli3.0版本发布IIS 其中在部分视图重现页面404问题
下面列举linux及window环境部署解决方案、亲测

1、发布确认
vue.config.js 或 config> index.js 确认发布 publicPath 或 assetsPublicPath
这里 ./ / 为常用的发布配置,按自己项目情况确认更改即可
2、确定路由配置
看项目中routers配置情况及默认router路由也配置是否正确
3、linux-apache环境发布
我们在mac开发中常会使用内置的apache模拟线上的生产发布
若发生404或页面刷新重定向错误问题,手动引入.htaccess文件配置重写规则大致如下


    RewriteEngine On
    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

发布到生产环境根目录、后端服务器也应同步配置apache(这里不做阐述)
由此解决视图页刷新问题
4、windows-IIS环境发布
IIS相对而讲比较简单、web平台安装程序提供了丰富的服务器组件可供使用配置
安装URL重写程序

IIS部署VUE-CLI3.0 项目解决刷新404问题 - URL重写_第1张图片
image.png

找到URL重写程序安装即可、会显现下图功能


IIS部署VUE-CLI3.0 项目解决刷新404问题 - URL重写_第2张图片
image.png

配置下图参数并重启IIS/网站


IIS部署VUE-CLI3.0 项目解决刷新404问题 - URL重写_第3张图片
image.png

注:网络或IIS服务器问题可能造成web平台安装程序打开及安装失败问题、不要慌、直接网搜URL Rewrite扩展进行安装即可

你可能感兴趣的:(IIS部署VUE-CLI3.0 项目解决刷新404问题 - URL重写)