在IIS下部署vue项目

在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的配置。

　　具体的修改，请参考https://blog.csdn.net/lynehylo/article/details/80623190

2、运行的使用还会报GET http://****/fonts/iconfont.woff net::ERR_ABORTED 404 (NOT FOUND)

　　原因是IIS的默认配置并没有支持.woff的后缀，所以就要添加配置。

　　具体添加请参考：https://blog.csdn.net/coco1118/article/details/86612973