Question

您好，有人在其中部署了应用程序以使用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"
  }
}

我在根目录中有一个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

最好的问候丹尼尔

Answer 1

好吧，因为您正在使用服务器端的节点。 vue-router官方文档已经提到您需要添加代码才能使用它。

链接到official docs

希望这会有所帮助！

Answer 2

我使用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>

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

使用历史记录模式在Azure App Service上部署Vue CLI

2 个答案: