博客
关于我
vue部署到nginx服务器后,访问页面出现404
阅读量:561 次
发布时间:2019-03-09

本文共 1269 字,大约阅读时间需要 4 分钟。

在 Vue3 开发项目时,正确配置项目路径是确保项目能够顺利运行的关键步骤。以下是针对 Vue3 项目路径配置的详细说明和解决方案。

项目路径配置

在 Vue3 项目中,为了确保项目能够正确访问,通常需要在 vue.config.js 文件中进行根路径配置。这一步骤有助于项目在不同环境下正确加载。

配置步骤

  • 修改 vue.config.js 文件

    打开你的 Vue 项目根目录,找到 vue.config.js 文件。然后,修改内容如下:

    module.exports = {  publicPath: '/myapp/',  outputDir: 'dist'}

    这里,publicPath 用于指定项目访问的根路径,outputDir 用于指定编译后的文件目录。

  • 编译项目并上传文件

    使用 npm run build 命令编译项目,然后将编译后的 dist 文件夹上传到服务器的 /nginx/html/myapp 目录下。

    确保服务器配置允许访问该目录,例如:

    location /myapp {  root /var/www/html(myapp)/;  try_files $uri $document_root$uri /oauth/index.html;}

    这样,访问 /myapp/login 等路径时,nginx 会尝试匹配对应文件,如果不存在则重定向到 /oauth/index.html

  • 路径重定向问题

    当访问 /myapp/login 时,可能会出现 404 错误,原因在于路径没有正确配置。以下是解决方案:

    1. Nginx 配置

    确保你的 Nginx 配置支持路径重定向。例如:

    location /myapp {  root /var/www/html/myapp;  try_files $uri $document_root$uri /oauth/index.html;}

    这样,Nginx 会尝试匹配请求路径,如果不存在则重定向到 /oauth/index.html

    2. Vue Router 配置

    在 Vue Router 中添加通用路由,确保未定义路径显示 404 页面:

    const router = new VueRouter({  routes: [    // 定义登录路由    { path: '/login', component: Login },    // 定义其他路由    { path: '/about', component: About },    // 通用路由(所有未定义路径)    { path: '*', component: NotFound }  ]});

    这样,所有未定义的路径都会被重定向到 404 页面。

    注意事项

    • 确保服务器支持正确的文件路径和重定向规则。
    • 定期检查 Nginx 配置文件,避免路径配置错误。
    • 在 Vue Router 中,通用路由必须放在所有其他路由的下方。

    通过以上配置,你可以解决路径访问问题,确保项目正常运行。

    转载地址:http://sxbpz.baihongyu.com/

    你可能感兴趣的文章
    LiveGBS user/save 逻辑缺陷漏洞复现(CNVD-2023-72138)
    查看>>
    localhost:5000在MacOS V12(蒙特利)中不可用
    查看>>
    logstash mysql 准实时同步到 elasticsearch
    查看>>
    Luogu2973:[USACO10HOL]赶小猪
    查看>>
    mabatis 中出现< 以及> 代表什么意思?
    查看>>
    Mac book pro打开docker出现The data couldn’t be read because it is missing
    查看>>
    MAC M1大数据0-1成神篇-25 hadoop高可用搭建
    查看>>
    mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
    查看>>
    Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
    查看>>
    MangoDB4.0版本的安装与配置
    查看>>
    Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
    查看>>
    mapping文件目录生成修改
    查看>>
    MapReduce程序依赖的jar包
    查看>>
    mariadb multi-source replication(mariadb多主复制)
    查看>>
    MariaDB的简单使用
    查看>>
    MaterialForm对tab页进行隐藏
    查看>>
    Member var and Static var.
    查看>>
    memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
    查看>>
    memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
    查看>>
    Memcached:Node.js 高性能缓存解决方案
    查看>>