Vue項目打包部署到iis服務器的配置方法

更新時間：2019年10月14日 15:01:06 作者：I like study.

這篇文章主要介紹了Vue項目打包部署到iis服務器的配置方法，文中通過代碼示例給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

一將Vue項目打包

切換到項目目錄下，輸入cnpm run build 打包

在這里插入圖片描述

等待打包完成

在這里插入圖片描述

二 URL 重寫

訪問我們的一個url

原因是vue不是根據(jù)項目目錄的地址訪問的，是根據(jù)vue-router轉發(fā)路由訪問url，在這里我們應該進行url rewrite
url write的方式有兩種，一種是在iis下載url rewrite工具配置規(guī)則

另一種是配置web.config文件，我用的是第二種

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>

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

在這里插入圖片描述

發(fā)現(xiàn)成功訪問到我們的url

在這里插入圖片描述

總結

以上所述是小編給大家介紹的Vue項目打包部署到iis服務器的配置方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

VUE3安裝element?ui失敗的原因以及解決辦法
這篇文章主要給大家介紹了關于VUE3安裝element?ui失敗的原因以及解決的相關資料,很多朋友升級使用Vue3了,但在安裝element?ui失敗出錯了,這里給大家總結下,需要的朋友可以參考下
2023-09-09
vue3內嵌iframe的傳參與接收參數(shù)代碼示例
這篇文章主要給大家介紹了關于vue3內嵌iframe的傳參與接收參數(shù)的相關資料,Vue項目中使用iframe及傳值功能相信有不少人都遇到過,需要的朋友可以參考下
2023-07-07
vite+vue3使用@路徑報錯處理
本文主要介紹了vite+vue3使用@路徑報錯處理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-11-11
Css中該如何使用Vue的變量
在我們使用Vue開發(fā)時,經常會用到CSS,下面這篇文章主要給大家介紹了關于Css中該如何使用Vue變量的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
vue-router的hooks用法詳解
這篇文章主要介紹了vue-router的hooks用法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06
基于Vue3實現(xiàn)旋轉木馬動畫效果
這篇文章主要為大家介紹了如何利用Vue3實現(xiàn)旋轉木馬的動畫效果，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，需要的可以參考一下
2022-05-05
Vue中fragment.js使用方法小結
這篇文章主要給大家匯總介紹了Vue中fragment.js使用方法的相關資料,需要的朋友可以參考下
2020-02-02
vue實現(xiàn)ajax滾動下拉加載，同時具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實現(xiàn)ajax滾動下拉加載，同時具有l(wèi)oading效果的實現(xiàn)代碼，文章包括難點說明，介紹的非常詳細，感興趣的朋友參考下
2017-01-01
教你在vue?中使用?svg?symbols
這篇文章主要介紹了如何在?vue?中使用?svg?symbols，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
vue2.0基于vue-cli+element-ui制作樹形treeTable
這篇文章主要介紹了vue2.0基于vue-cli+element-ui制作樹形treeTable，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04