使用 vue-cli 發佈到 IIS

2018-11-07 置頂文章

3473
0
JavaScript
2018-11-14

使用 vue-cli 發佈到 IIS 上

在 vue-cli 中，我有使用了 vue-router 及 webpack

所以主要要設定的點也是在這兩個部分

第一步先讓 IIS Server 可以支援 vue-router ，所以要先安裝 urlrewrite
( 安裝 url Rewrite 時遇到驗證失效問題，請參考此頁 )

然後要設置 web.config 如下

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" 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>

第二步需要設定目錄對應
一般如果vue框架的程序上传到网站服务器的根目录下是不会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题
而我是有使用到 IIS 的虛擬目錄設定

所以先來設置 webpack
需設定的檔案如下

build\
+ config\
+index.js

build: { assetsPublicPath: '/虛擬目錄名稱/', }

然後要設 vue-router
src\
+router\
+index.js

export default new Router({ base: '/虛擬目錄名稱/',

以上就完成所需要的設定

列出來雖然很簡單，不過我是找了很久才找到(拚起來)

所以就自己寫一篇記錄下來

-----------------------------------------------------------------
ref.
Hosting Vue JS SPA build on Microsoft IIS (參考1) (參考2)
vuejs怎么在服务器上发布部署 (參考3)

vue.js

回首頁