(fix) CDNキャッシュ時の意図しないリダイレクトを軽減

README.md

@@ -16,6 +16,8 @@ Website for Misskey, built with [Nuxt](https://nuxt.com/).
 
 内部リンク・外部リンクに関する処理を強化した[`<GNuxtLink>`](./components/g/NuxtLink.vue)を使用していますので、**リンクを追加する際は`<NuxtLink>`ではなく`<GNuxtLink>`を使用してください。**
 
+また、Nuxtのルーティングストラテジに、ホスティング環境に適した設定を適用するため、動的リンクの作成に使用する`useLocalePath`をラップしたコンポーサブル関数`useGLocalePath`を使うようにしています。
+
 ### Misskey Webへのリンクについて
 
 GNuxtLinkおよび各種Docsで、アドレスに `x-mi-web://` から始め、続けてMisskeyの相対パスを入力すると、Misskey Webへのリンクに置き換えられます。

components/content/MkIndex.vue

@@ -39,7 +39,7 @@ const realBasePath = computed<string>(() => {
     return route.path.replace(/^.*\/docs/, `/${locale.value}/docs`);
 });
 
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 
 const query = queryContent(realBasePath.value);
 </script>

components/content/ProseA.vue

@@ -7,7 +7,7 @@ import { isLocalPath, sanitizeInternalPath } from '@/assets/js/misc';
 const runtimeConfig = useRuntimeConfig();
 const rootDomain = new $URL(runtimeConfig.public.baseUrl);
 const { resolve } = useRouter();
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 
 const props = defineProps({
     href: {

components/g/Footer.vue

@@ -64,7 +64,7 @@
 import MiIcon from '@/assets/svg/misskey_mi_bi.svg';
 import ExtIco from 'bi/box-arrow-up-right.svg';
 
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 </script>
 
 <style scoped>

components/g/Nav.vue

@@ -122,7 +122,7 @@ watch(() => route.path,(to) => {
 });
 
 const switchLocalePath = useSwitchLocalePath();
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const spLocaleOption = ref<string>(currentLocale.value);
 function changeLocale() {
     const path = switchLocalePath(spLocaleOption.value);

components/g/NuxtLink.vue

@@ -25,7 +25,7 @@ const rawProps = defineProps<{
     target?: unknown;
 }>();
 
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 
 const needsToOpenExternally = ref(false);
 const realHref = computed(() => {

components/index/Donation.vue

@@ -8,5 +8,5 @@
     </div>
 </template>
 <script setup lang="ts">
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 </script>

components/index/GetStarted.vue

@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import { vFadeIn } from 'assets/js/fadein';
 
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 </script>
 
 <style scoped>

components/index/hero/Left.vue

@@ -39,7 +39,7 @@ import { isLocalPath } from '~/assets/js/misc';
 
 const { notice } = useAppConfig();
 const { locale, fallbackLocale } = useI18n();
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const showTagline = ref(false);
 const colorMode = useColorMode();
 const mobileScreenShot = computed(() => (colorMode.preference === 'dark') ? '/img/hero/misskey-mobile-dark.png' : '/img/hero/misskey-mobile-light.png');

components/tools/AsideNavSection.vue

@@ -15,7 +15,7 @@ const navData = props.d;
 const route = useRoute();
 const router = useRouter();
 const isShown = ref(false);
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 
 watch(() => route.path, () => {
     if (navData.items.some((e) => isSamePath(route.path, localePath(e.to)))) {

composables/useGLocalPath.ts

@@ -0,0 +1,17 @@
+import {
+    getComposer,
+    useLocalePath as _useLocalePath,
+} from 'vue-i18n-routing';
+
+/** useLocalePathのラッパー関数。 */
+export function useGLocalePath(
+    options?: NonNullable<Parameters<typeof _useLocalePath>[0]>
+): ReturnType<typeof _useLocalePath> {
+    const { route, router, i18n, strategy } = options || {}
+    return _useLocalePath({
+        route: route || useRoute(),
+        router: router || useRouter(),
+        i18n: i18n || getComposer(useNuxtApp().$i18n),
+        strategy: strategy ?? 'prefix', // ←リンクではprefixつきにする
+    })
+}

error.vue

@@ -34,7 +34,7 @@ const colorMode = useColorMode();
 const runtimeConfig = useRuntimeConfig();
 
 const { locale, locales } = useI18n();
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const currentLocaleIso = computed(() => (locales.value as LocaleObject[]).find((e) => e?.code === locale.value)?.iso);
 
 const isNavOpen = ref<boolean>(false);

layouts/tools.vue

@@ -14,7 +14,7 @@ function clickNav() {
 const isNavOpen = ref<boolean>(false);
 const isAsideNavOpen = ref<boolean>(false);
 
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 
 useHead({
     htmlAttrs: {

nuxt.config.ts

@@ -117,7 +117,8 @@ export default defineNuxtConfig({
 		langDir: 'locales_dist',
 		defaultLocale: 'ja',
 		// ▼ Defaultルートは、nitroプラグインでオーバーライドする
-		strategy: 'prefix',
+		// 　 リンクはuseGLocalePath（ラッパー）を使う
+		strategy: 'prefix_and_default',
 		trailingSlash: true,
 	},
 	colorMode: {

pages/about-us/index.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const { t } = useI18n();
 const route = useRoute();
 

pages/blog/[slug].vue

@@ -47,7 +47,7 @@ const route = useRoute();
 
 // ▼他言語からやってきたときに正しいパスに戻す▼
 const originalLocale = useState('miHub_blog_originalLocale', () => 'ja');
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const getRouteBaseName = useRouteBaseName();
 let isTransformed = false;
 

pages/blog/index.vue

@@ -39,7 +39,7 @@ const localeState = useState('miHub_blog_originalLocale', () => locale.value);
 localeState.value = locale.value;
 
 const { data } = await useAsyncData('blog', () => queryContent('blog').only(['_path', 'navTitle', 'title', 'date']).sort({ date: -1 }).find());
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 
 route.meta.title = t('_blog.title');
 route.meta.description = t('_blog.description');

pages/docs/index.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const { t, locale } = useI18n();
 const route = useRoute();
 

pages/learn-more.vue

@@ -70,7 +70,7 @@
 
 <script setup lang="ts">
 const { t } = useI18n();
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const route = useRoute();
 
 route.meta.title = t('_other.title');

pages/servers/index.vue

@@ -51,7 +51,7 @@ import type { InstancesStatsObj } from '@/types/instances-info';
 import ArrowRightIco from "bi/arrow-right.svg";
 
 const { t, locale } = useI18n();
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const route = useRoute();
 
 const instancesStats = ref<InstancesStatsObj>();

pages/test.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 </script>
 
 <style scoped>

pages/tools/index.vue

@@ -46,7 +46,7 @@ definePageMeta({
 });
 
 const { t } = useI18n();
-const localePath = useLocalePath();
+const localePath = useGLocalePath();
 const route = useRoute();
 
 route.meta.title = t('_tools.title');