Vue項目部署在IIS

一、方式一 將vue發布到一個單獨的網站上

發布vue項目，生成dist文件夾

 

 

 

打開iis服務器后選中【網站】后右擊選【添加網站】，物理路徑指向發布生成的dist文件夾

到此項目就部署好了，點擊右側瀏覽即可打開網站

 

 你以為部署完成就可以了，遇到的問題才剛開始

---

  

 沒錯，開發環境下沒問題的項目，在通過以上發布部署后報錯了，先歸納了下出現的錯誤：

1、提示Vue is not  defined，如下截圖

 

 2、提示Unexpected token <，如下圖

 

 

3、經過網上的各種解決方式終於擺脫了有些錯誤，打開了網站，但是刷新頁面，卻報404.。。。。。如下圖

  

 先說說我在網上找的解決方式吧，為了解決Vue is not  defined，我對項目代碼做了調整，包括資源的引用方式、路由的調整和mode：history改為了mode：hash等等吧，每次都會引出其他錯誤。后來遇到IIS中開啟代理和設置URL重寫的方式來解決，一一做了嘗試，發現還是報錯Unexpected token <，首先可以確定不是代碼的問題。總之肺疼

---

還好，還好最終找到了解決我問題的方式

總體來說就是在IIS正常部署完vue項目上之后，需要對URL重定向，原因是vue是根據vue-router轉發路由訪問url，在這里我們應該進行url rewrite。url write的方式有兩種

1、在iis下載url rewrite工具配置規則

上邊說過我嘗試過該方式，也下載了所需模塊：urlrewrite，可能配置的有問題，反正就是報錯，如果能正確配置應該是沒問題的

 

2、配置web.config文件

最終我使用了該方式，簡單方便，和使用URL重寫原理是一樣的

web.config的內容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/x-woff2" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".ttf" mimeType="font/x-ttf" />
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="text/json" />
 </staticContent>
 <rewrite>
  <rules>
  <rule name="vue" stopProcessing="true">
   <match url=".*" />
   <conditions logicalGrouping="MatchAll">
   <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
   <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
   </conditions>
   <action type="Rewrite" url="/" />
  </rule>
  </rules>
 </rewrite>
 </system.webServer>
</configuration>

將該文件拷貝到打包好根目錄下面

 然后發現網站OK了

---

二、通過添加應用程序進行部署

除了以上方式之外，還有另一種方式在IIS部署VUE項目，方便簡潔，不會出現以上的各種問題。即新建一個網站，在該網站下，添加應用程序或者添加虛擬目錄，具體有時間在描述下