So you pushed your SPA build with Vue.js to Azure and if you refresh anything deeper than your index page you are getting a "resource not available" or something along those lines.
well my dear friend you need to include a webconfig file in your build, now the problem is that if you include a webconfig in your project that file is ignored in your build.
before we tackle that problem, let's start with the actual web config.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" 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>
Create a file in your project somewhere and call it web.config
Now let's focus on copying it over to your build result.
to pull this off you will need to install the copy webpack plugin
"copy-webpack-plugin": "^6.4.1",
ensure that it's version 6.x or at least at the time of this blog post
npm install copy-webpack-plugin@6 --save-dev
next open your vue.config.js file and use your webpack copy plugin to copy your webconfig to your dist folder.
// eslint-disable-next-line @typescript-eslint/no-var-requires
const webpack = require('webpack');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const CopyPlugin = require('copy-webpack-plugin');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'My app name'
return args
})
},
configureWebpack: {
plugins: [
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "src", "web.config"),
to: path.resolve(__dirname, "dist",),
}
]
})
]
}
}
and voila, npm run build and you should see your web.config file in your dist folder.
