laravel - vue-router history mode flexible for non-ssr and ssr mode - Stack Overflow

admin管理员组

文章数量:1122833

I am first time developing a laravel - Inertia - Vue App and am doing y first steps with SSR.

At the moment during setup of the router I create a WebHistory which obviously isn't suited for SSR context, which actually requires a createMemoryHistory.

const router = createRouter({
    history: createWebHistory(),

Now off course I could switch the create statment to SSR context and that's it. But I'd like to have a flexible router setup which is able to differentiate between running in SSR context and not, so I can develop locally with or without SSR as I please without having to change that constantly

I found as a solution in other discussions, that this piece of code, could get me that flexible setup.

const createHistory = process.env.SERVER? createMemoryHistory()
    : process.env.VUE_ROUTER_MODE === 'history'
        ? createWebHistory()
        : createWebHashHistory();

but I am not very clear about the process.env which as far as know never include.

When I browse to the app-login after php artisan serve and in parallel php artisan inertia:start-ssr I get this error:

  at <App>
TypeError: routerHistory.createHref is not a function

I assume this is connected to using the wrong History Object which leads me to believe that somehow the found code snippet is instantiating the wrong Web History, because without SSR and by simply usingcreateRouter({history: createWebHistory,. all works fine. It's only failing in ssr context

Can anyone point me to achieve that flexible vue-router setup for client & ssr context? The app itself is in no special need of ssr in any case. But it would be cool if I'd have that flexibility.

As an additional point (but that's another question), if I hardcode the MemoryHistory for SSR context, I get unautenticated errors when the vue app tries to make internal api calls, and also router links do not work in ssr

   [Vue warn]: A plugin must either be a function or an object with an "install" function.
[Vue warn]: A plugin must either be a function or an object with an "install" function.
[Vue warn]: Unhandled error during execution of render function 
  at <RouterLink to="/" class="w-48 block lg:w-72 ms-10" > 
  at <CoverLogin errors= {} jetstream= {
  canCreateTeams: false,
  canManageTwoFactorAuthentication: true,
  canUpdatePassword: true,
  canUpdateProfileInformation: true,
  hasEmailVerification: true,
  flash: [],
  hasAccountDeletionFeatures: true,
  hasApiFeatures: false,
  hasTeamFeatures: false,
  hasTermsAndPrivacyPolicyFeature: false,
  managesProfilePhotos: false
} auth= { user: null }  ... > 
  at <Inertia initialPage= {
  component: 'auth/cover-login',
  props: {
    errors: {},
    jetstream: {
      canCreateTeams: false,
      canManageTwoFactorAuthentication: true,
      canUpdatePassword: true,
      canUpdateProfileInformation: true,
      hasEmailVerification: true,
      flash: [],
      hasAccountDeletionFeatures: true,
      hasApiFeatures: false,
      hasTeamFeatures: false,
      hasTermsAndPrivacyPolicyFeature: false,
      managesProfilePhotos: false
    },
    auth: { user: null },
    errorBags: [],
    ziggy: {
      url: 'http://127.0.0.1:8000',
      port: 8000,
      defaults: [],
      routes: [Object],
      location: 'http://127.0.0.1:8000/login'
    },
    user: null,
    portfolios: null
  },
  url: '/login',
  version: '02f989e0f5f1470ec27c71773c20e905'
} initialComponent= {
  __name: 'cover-login',
  __ssrInlineRender: true,
  setup: [Function (anonymous)],
  inheritAttrs: false
} resolveComponent=fn<r>  ... > 
  at <App>
TypeError: routerHistory.createHref is not a function
    at Object.resolve (file:///Volumes/Data-Partition/PHPStorm/myproject/node_modules/vue-router/dist/vue-router.mjs:3131:40)
    at ComputedRefImpl.fn (file:///Volumes/Data-Partition/PHPStorm/myproject/node_modules/vue-router/dist/vue-router.mjs:2267:23)
    at refreshComputed (/Volumes/Data-Partition/PHPStorm/myproject/node_modules/@vue/reactivity/dist/reactivity.cjs.js:384:28)
    at get value (/Volumes/Data-Partition/PHPStorm/myproject/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1625:5)
    at ComputedRefImpl.fn (file:///Volumes/Data-Partition/PHPStorm/myproject/node_modules/vue-router/dist/vue-router.mjs:2270:35)
    at refreshComputed (/Volumes/Data-Partition/PHPStorm/myproject/node_modules/@vue/reactivity/dist/reactivity.cjs.js:384:28)
    at get value (/Volumes/Data-Partition/PHPStorm/myproject/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1625:5)
    at ComputedRefImpl.fn (file:///Volumes/Data-Partition/PHPStorm/myproject/node_modules/vue-router/dist/vue-router.mjs:2295:60)
    at refreshComputed (/Volumes/Data-Partition/PHPStorm/github/borealis/node_modules/@vue/reactivity/dist/reactivity.cjs.js:384:28)
    at get value (/Volumes/Data-Partition/PHPStorm/github/borealis/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1625:5)

本文标签： laravelvuerouter history mode flexible for nonssr and ssr modeStack Overflow