使用历史模式在 Azure 应用服务上部署 Vue CLI答案

【问题标题】：Deploy Vue CLI on Azure App Service with History mode使用历史模式在 Azure 应用服务上部署 Vue CLI
【发布时间】：2019-03-19 16:50:57
【问题描述】：

您好，有没有人将应用程序部署到 azure 应用服务并让历史模式工作？我一直在尝试打开和关闭，但无法正常工作：S

我正在使用 connect-history-api-fallback，我的 package.json 看起来像这样：

{
  "name": "wbo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "buefy": "^0.7.3",
    "connect-history-api-fallback": "^1.6.0",
    "express": "^4.16.4",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.11",
    "nprogress": "^0.2.0",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vuelidate": "^0.7.4",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-buefy": "^0.3.5",
    "vue-template-compiler": "^2.5.21"
  }
}

我在 root 中有一个 server.js 文件，如下所示：

const express = require('express')
const history = require('connect-history-api-fallback')
const port = process.env.PORT || 8080
const app = express()

app.use(history())

app.use(express.static(__dirname + '/dist/'))
app.get('/*', function(req, res) {
  res.sendFile(__dirname + '/dist/html.html')
})
app.listen(port)

console.log('Server started....')

有谁知道我是否需要做更多的事情，或者可以在某处看到问题：S

最好的问候丹尼尔

【问题讨论】：

标签： azure vue-router azure-web-app-service vue-cli-3 html5mode

【解决方案1】：

我使用 ISS 服务器

这是我的代码

  <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>
    
    
                    <rule name="redirect all requests" stopProcessing="true">
                        <match url="^(.*)$" ignoreCase="false" />
                        <conditions logicalGrouping="MatchAll">
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                         </conditions>
                        <action type="Rewrite" url="index.html" appendQueryString="true" />
                    </rule>
                </rules>
            </rewrite>
        </system.webServer>
    </configuration>

我使用相同的文档，但我不知道是否还有其他需要做的事情，或者可以在某处看到问题

【讨论】：