admin 管理员组

文章数量: 1086019

I have a Vue 3 app that utilizes the Composition API, Vue Router w/ history mode, Vite, Vuetify and Typescript.
When I refresh the browser on a different page, I get a 404 error, and I'm pretty confident the issue is related to not re-routing properly.

This is the explanation Google gave me:

When the browser refreshes, it sends a new request to the server for the current URL. If the server isn't set up to route all requests to the index.html file, it will return a 404 error because it cannot find a matching resource for the requested path. To resolve this, the server needs to be configured to redirect all requests to the index.html file, allowing Vue Router to handle the routing on the client side.

However, the solutions I've seen online rather confuse me or use other web servers like Apache or Nginx. My plan with this application is to eventually serve it locally from an API, so I don't think those options are applicable to me.

I've tried adding this fallback route to the Vue router:

// index.ts
{
  path: '/:pathMatch(.*)*',
  name: 'Fallback',
  redirect: '/',
}

I've also tried adding a server proxy to the vite.config.ts file. This is the preferred route I'd like to take. However, I don't fully understand how to configure it properly, and I'm not sure how to take advantage of its features.
This is what I've tried so far:

FYI: Anytime <insert port #> or <insert local IP> is used, they are replaced with actual, hard-coded values in my code

// vite.config.ts
server: {
    port: <insert port #>,
    proxy: {
      '/Overview': {
        target: 'http://<insert local IP>:<insert port #>',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/Overview/, '/'),        
      },
    },
  },

I've also seen solutions that utilize the configure property with and without the path rewrite:
rewrite: (path) => path.replace(/^\/Overview/, '/'),

// vite.config.ts
server: {
    port: <insert port #>,
    proxy: {
      '/Overview': {
        target: 'http://<insert local IP>:<insert port #>',
        changeOrigin: true,
        configure: (proxy) => {
          proxy.on('error', (err) => {
            console.log('proxy error', err)
          })
          proxy.on('proxyReq', (proxyReq, req) => {
            console.log('Sending Request to the Target:', req.method, req.url)
          })
          proxy.on('proxyRes', (proxyRes, req) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url)
          })
        },        
      },
    },
  },

I serve the app using npm run serve which is configured in the package.json file under scripts like so:
"serve": "set PORT=<insert port #> && serve dist",

My questions are:

  1. How do these options differ from each other?
  2. Which option (if any) should I use to correctly redirect my routes, and what is the correct way to implement it?
  3. What is the purpose of using the configure property in the server proxy and how is it used above?

本文标签： typescript404 error when refreshing browser in Vue appStack Overflow

版权声明：本文标题：typescript - 404 error when refreshing browser in Vue app - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744077136a2529560.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。