Vue專案部署在IIS

發布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的方式有兩種

2、配置web.config檔案

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

web.config的內容：

<?xml version="

1.0" encoding="
utf-8
"?>
".woff
" />
".woff
" mimetype="
font/x-woff
" />
".woff2
" />
".woff2
" mimetype="
font/x-woff2
" />
".ttf
" />
".ttf
" mimetype="
font/x-ttf
" />
".json
" />
".json
" mimetype="
text/json
" /> "
vue" stopprocessing="
true
">
".*" />
"matchall
">
"" matchtype="
isfile
" negate="
true
" />
"" matchtype="
isdirectory
" negate="
true
" />
"rewrite
" url="
/" />   

然後發現**ok了

除了以上方式之外，還有另一種方式在iis部署vue專案，方便簡潔，不會出現以上的各種問題。即新建乙個**，在該**下，新增應用程式或者新增虛擬目錄，具體有時間在描述下

Vue 專案部署之iis

檢視電腦是否安裝iis 未安裝則開啟 控制面板 程式 啟用或關閉windows功能 根據需求選擇安裝，如下圖 右擊 開啟新增 介面，設定 名稱，物理路徑選擇你build之後的dist 目錄，這個檔案你可以隨意放到電腦的任意位置，建立好的 不一定可以訪問，有的需要設值 url rewrite 安裝之後...

vue專案部署在IIS上面的心得

一般在做前後端分離的時候，前端伺服器用的都是nginx，可是公司專案是需要執行在windows server上面的，所以綜合考慮之下用iis比較好一些，然而這方面的資料不如nginx那麼多，所以就想記錄一下這段時間遇到的坑，以防自己以後再遇到的時候忘記了，這樣我可以翻出來看看。這裡只說一下url重寫...

vue專案部署

1 更改專案下config資料夾index.js檔案 標紅處兩個位置 build 2 打包檔案，npm run build 之後會生成乙個dist資料夾,即為打包好的檔案，將檔案放在磁碟中，配置nginx監聽80埠，並指定服務名稱server name，最終可用kangqiao.kangqiao.c...