Pinia store not working when deployed to server but does when served by Vite - vue.js

Question

Problem: My vue3 app which uses a Pinia store works as expected when deployed locally. When deployed to a server it fails to display the page which accesses the store.
The problem is the same on Firebase (emulator and live site) and with Netlify which makes me think there is some (probably very simple!) explanation hidden in the code.
To pare it down I have made what I think are minor changes to the vanilla vue-create app.
main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");
App.vue
<script setup>
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
</script>
<template>
<header>
<img
alt="Vue logo"
class="logo"
src="#/assets/logo.svg"
width="125"
height="125"
/>
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView /></template>
<style>
...
</style>
views/AboutView.vue
<script setup>
import { useCounterStore } from "../stores/counter";
const newCounter = useCounterStore();
</script>
<template>
<div class="about">
This is an about page
{{newCounter.count}}
</div>
</div>
</template>
<style></style>
stores/counter.js
import { ref, computed } from "vue";
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", () => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, doubleCount, increment };
});
package.json
{
"name": "firebase-tester",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"pinia": "^2.0.23",
"vue": "^3.2.41",
"vue-router": "^4.1.5"
},
"devDependencies": {
"#rushstack/eslint-patch": "^1.1.4",
"#vitejs/plugin-vue": "^3.1.2",
"#vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"prettier": "^2.7.1",
"vite": "^3.1.8"
}
}
Commands to build
nom run dev
(Runs as expected on local server, with value of count shown on 'about' page
npm run build
Builds a dist folder
firebase emulators:start
Emulator shows home page as expected but clicking does nothing, and no further navigation possible.
firebase deploy
Same issues as with emulator
To test if firebase was the problem, I have also deployed to a Netlify site, which has identical problems.
No doubt there is a really obvious problem staring me in the face, but I'm not seeing it!
All help appreciated.

Answer 1

In order for SPA to route correctly, a configuration file must be supplied with Firebase and Netlify. For both, as far as I remember correctly, this must be located unchanged in the dist, i.e. application root. So the best place before the build will be public.
For firebase it is firebase.json and for Netlify it is _redirect.
Deploy Firebase
Redirects explained (Netlify)
Rewrites
I am not sure if this fixes the problem with the Pinia store but this is an initial requirement before continuing troubleshooting the Pinia issue.