在IIS下部署vue项目

分为两种情况:

第一种是在IIS根目录下部署项目

第二种是在IIS虚拟目录(二级/多级目录)下部署项目

 

在IIS根目录下部署项目

下面都是使用vue cli的界面来操作的

1、使用build编译生成vue应用。完成之后,就是在项目下生成一个dist的文件

  点击任务->build->运行->等待编译完成即可。

      

IIS 部署python iis 部署vue_IIS

2、编译完成之后,项目的根目录下就会多了一个dist的文件夹,这个文件夹就是刚刚编译好的项目文件

   

IIS 部署python iis 部署vue_二级_02

 3、然后在IIS上新建一个网站,然后把dist的文件放到项目下即可。(如何在IIS上创建网站)

   

IIS 部署python iis 部署vue_IIS 部署python_03

   

IIS 部署python iis 部署vue_二级_04

 4、然后就能够成功访问了。(我部署的是8080端口)

  

IIS 部署python iis 部署vue_IIS 部署python_05

 

 在IIS虚拟目录(二级/多级目录)下部署项目

 1、还是用刚刚打包好的dist文件夹,然后部署到虚拟目录下(IIS部署虚拟路径)

  

IIS 部署python iis 部署vue_IIS_06

 2、然后访问这个网站。奇怪的事情发生了,报错404了

  

IIS 部署python iis 部署vue_IIS 部署python_07

  随便找个404的请求点进去看一下,报资源的路径"http://localhost/static/css/app.b7cb370e.css"不存在。

  

IIS 部署python iis 部署vue_二级_08

  路径确实不存在,因为部署二级路径之后,实际路径变成了"http://localhost/VueAdminTemplateMaster/static/css/app.b7cb370e.css"路径

  

IIS 部署python iis 部署vue_IIS_09

  再看看dist目录下的index.html文件。引用的路径也是"/static"下的文件,而实际需要引用的是"/VueAdminTemplateMaster/static"下的文件。所以最终就报404了。

  

IIS 部署python iis 部署vue_css_10

3、那么如何处理呢?下面是404处理方法。

4、在vue.config.js中修改publicPath的值改为二级目录的值就可以了。例如我的二级目录是 VueAdminTemplateMaster 我直接改为"/VueAdminTemplateMaster/"即可

  

IIS 部署python iis 部署vue_css_11

 5、改好之后,重新打包。然后再次看看dist下的index.html文件,发现引用的文件路径已经把二级路径加上了

  

IIS 部署python iis 部署vue_css_12

 6、完美访问,没有404的报错了

  

IIS 部署python iis 部署vue_css_13

 

 

 其他一些部署可能会出现的情况

1、使用put和delete请求的时候显示报错,不能执行put请求,

  原因是IIS默认不支持put请求,所以就需要修改IIS的配置。


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

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