Vue項(xiàng)目打包部署到iis服務(wù)器的配置方法

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

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

一將Vue項(xiàng)目打包

切換到項(xiàng)目目錄下，輸入cnpm run build 打包

在這里插入圖片描述

等待打包完成

在這里插入圖片描述

二 URL 重寫

訪問我們的一個(gè)url

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

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

web.config內(nèi)容

<?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

在這里插入圖片描述

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue指令?v-bind的使用和注意需要注意的點(diǎn)
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點(diǎn)，下面文章圍繞?v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細(xì)代碼?需要的小伙伴可以參考一下，希望對(duì)大家有所幫助
2021-11-11
vue中element 上傳功能的實(shí)現(xiàn)思路
這篇文章主要介紹了vue中element 的上傳功能的實(shí)現(xiàn)思路,本文大概通過兩種實(shí)現(xiàn)思路，具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧
2018-07-07
element?Drawer?抽屜無(wú)法渲染問題及解決
這篇文章主要介紹了element?Drawer?抽屜無(wú)法渲染問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
Vue2.x配置路由導(dǎo)航守衛(wèi)實(shí)現(xiàn)用戶登錄和退出
之前在Vue的學(xué)習(xí)中通過路由導(dǎo)航守衛(wèi)控制實(shí)現(xiàn)了用戶登錄模塊的功能，本文基于Vue2.x進(jìn)行實(shí)現(xiàn)，在此將實(shí)現(xiàn)過程進(jìn)行記錄與總結(jié)，感興趣的可以了解一下
2021-08-08
一文輕松理解Vuex
這篇文章主要介紹了Vuex及其使用方法，感興趣的同學(xué)，可以參考下
2021-04-04
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項(xiàng)目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過引用并調(diào)用ElQuarterPicker.vue組件來(lái)實(shí)現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧
2024-09-09
vue中使用console.log打印的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用console.log打印的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項(xiàng)目或網(wǎng)頁(yè)上實(shí)現(xiàn)文字轉(zhuǎn)換成語(yǔ)音播放功能
這篇文章主要介紹了在vue項(xiàng)目或網(wǎng)頁(yè)上實(shí)現(xiàn)文字轉(zhuǎn)換成語(yǔ)音,需要的朋友可以參考下
2020-06-06
vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08