在IIS下部署vue项目
分为两种情况:
第一种是在IIS根目录下部署项目
第二种是在IIS虚拟目录(二级/多级目录)下部署项目
在IIS根目录下部署项目
下面都是使用vue cli的界面来操作的
1、使用build编译生成vue应用。完成之后,就是在项目下生成一个dist的文件
点击任务->build->运行->等待编译完成即可。
2、编译完成之后,项目的根目录下就会多了一个dist的文件夹,这个文件夹就是刚刚编译好的项目文件
3、然后在IIS上新建一个网站,然后把dist的文件放到项目下即可。(如何在IIS上创建网站)
4、然后就能够成功访问了。(我部署的是8080端口)
在IIS虚拟目录(二级/多级目录)下部署项目
1、还是用刚刚打包好的dist文件夹,然后部署到虚拟目录下(IIS部署虚拟路径)
2、然后访问这个网站。奇怪的事情发生了,报错404了
随便找个404的请求点进去看一下,报资源的路径"http://localhost/static/css/app.b7cb370e.css"不存在。
路径确实不存在,因为部署二级路径之后,实际路径变成了"http://localhost/VueAdminTemplateMaster/static/css/app.b7cb370e.css"路径
再看看dist目录下的index.html文件。引用的路径也是"/static"下的文件,而实际需要引用的是"/VueAdminTemplateMaster/static"下的文件。所以最终就报404了。
3、那么如何处理呢?下面是404处理方法。
4、在vue.config.js中修改publicPath的值改为二级目录的值就可以了。例如我的二级目录是 VueAdminTemplateMaster 我直接改为"/VueAdminTemplateMaster/"即可
5、改好之后,重新打包。然后再次看看dist下的index.html文件,发现引用的文件路径已经把二级路径加上了
6、完美访问,没有404的报错了
其他一些部署可能会出现的情况
1、使用put和delete请求的时候显示报错,不能执行put请求,
原因是IIS默认不支持put请求,所以就需要修改IIS的配置。
2、运行的使用还会报GET http://****/fonts/iconfont.woff net::ERR_ABORTED 404 (NOT FOUND)
原因是IIS的默认配置并没有支持.woff的后缀,所以就要添加配置。