美文网首页
vue history 模式 页面 404 空白

vue history 模式 页面 404 空白

作者: 冰落寞成 | 来源:发表于2023-04-05 15:49 被阅读0次

    https://example.com/user/id 404

    例如 https://example.com/user/id
    由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。这就尴尬了。

    解决办法

    1、 nginx 配置

    location / {
      try_files $uri $uri/ /index.html;
    }
    

    vue.config.js 配置 publicPath

    const BASE_URL = process.env.NODE_EVN === 'production'
      ? './'
      : '/'
    const port = process.env.PORT || 8080
    module.exports = defineConfig({
      // 控制转译那些node_modules文件,默认false忽略全部,true全部转移,可以传一个数组来选择指定的文件
      transpileDependencies: true,
      //  基本路径
      publicPath: BASE_URL,
      //  是否使用带有浏览器内编译器的完整构建版本
      runtimeCompiler: true
    })
    

    静态文件引入方式

    必须使用 <%= BASE_URL %>

     <script src="<%= BASE_URL %>server.js"></script>
    

    路由配置

    const router = new Router({
      mode: 'history',
      routes
    })
    

    相关文章

      网友评论

          本文标题:vue history 模式 页面 404 空白

          本文链接:https://www.haomeiwen.com/subject/bgoeddtx.html