首页 > 系统相关 >宝塔 nginx 运行 vue项目

宝塔 nginx 运行 vue项目

时间:2023-11-03 13:12:17浏览次数:42  
标签:index vue 宝塔 uri server nginx html location

宝塔 安装nginx

nginx 根目录: /www/server/nginx/html

修改nginx 配置

下滑到70多行,添加 server 对象内容,内容如下

    server {
      listen  82;
      server_name test2;
       location / {
            root   html/test2;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_pass http://172.16.8.9:8888/;
        }
      error_page 500 502 503 504 /50x.html;
      location = /50x.html {
       root html;
      }
    }

image

保存

注意事项

  1. 使用history模式,页面显示空白
    解决方法:将dist文件夹的内容,放到nginx服务器运行即可

  2. vue 打包成dist后,代理跨域设置失效
    解决方法:使用nginx服务器运行,并在nginx服务器的配置文件中,进行代码配置
    配置代码如下:

location /api/ {
	proxy_pass http://172.16.8.9:8888/;
}

注:

  • /api 变成 /api/**
  • proxy_pass 设置的地址后面,一定要加 / 与分号
  1. 解决子组件页新刷新显示404的问题,
    配置代码如下:
location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
}

参考链接

https://www.bilibili.com/read/cv20095657/

标签:index,vue,宝塔,uri,server,nginx,html,location
From: https://www.cnblogs.com/ko25891wan/p/17807387.html

相关文章

  • 在虚拟机(Linux)中Docker中部署Nginx成功,但是在宿主机无法访问Nginx站点?
    1.问题本文是基于黑马程序员Docker基础--常见命令一课中部署Nginx时遇到的问题作出解答。在虚拟机(Linux)中Docker中部署Nginx成功,但是在宿主机无法访问Nginx站点如图,Nginx服务已经启动成功但是我们在宿主机的浏览器试图访问的时候却总是报错:2.解决思路2.1查看端口号是否映......
  • vue图片上传视频
    图片上传是现在Web开发中常见的需求之一。而使用Vue框架可以使得这一过程更加方便和有效。在Vue中使用预先开发好的组件,可以快速地实现图片上传功能。//在Vue组件中引用插件importVueUploadComponentfrom'vue-upload-component'//在模板中引用组件上面的代码使用VueUplo......
  • vue3 -点击按钮进入新的页面
    一、调用页面//路由import{useRouter}from'vue-routerlet$router=useRouter()//车组调整页面consthandleCar=(row:any)=>{ $router.push({path:"/test/edit",query:{setCode:row.setCode,lineName:row.lineName}})}二、新打开的页面importuseTagsViewSt......
  • vue3 用法汇总(二)
    1、列表中鼠标放在不同单元格显示不同的背景颜色<el-tablev-resize:44:data="tableData"class="tablemarking-table"borderstyle='margin:10px0px'highlight-current-rowelement-loadi......
  • linux下安装nginx
    下载nginxwgethttps://nginx.org/download/nginx-1.25.3.tar.gzyum安装依赖包yum-yinstallgcczlibzlib-develpcre-developensslopenssl-devel解压tar-zxvfnginx-1.22.0.tar.gz配置当前nginxcdnginx-1.22.0./configure--prefix=/usr/local/nginx......
  • vue上传视频框架
    在Web应用程序中经常需要用户上传视频,以便内容分享,教程和其他目的。Vue.js是一种流行的JavaScript框架,它提供了一种方便的方式来设计交互式和动态的用户界面,因此Vue上传视频框架是一种非常受欢迎的技术。Vue.js框架提供了各种插件和工具,它们可以帮助开发人员轻松地实现视频上传功......
  • Vue树形单选选择器
    调用页面SuperviseTimerModal.vue代码如下:<template><div><j-modalcentered:title="title":width="width":visible="visible":destroyOnClose="true"switchFullscreen......
  • 前后端都用得上的 Nginx 日常使用经验
    前言nginx是一个高性能的开源反向代理服务器和web服务器,一般用来搭建静态资源服务器、负载均衡器、反向代理,本文将分享其在Windows/docker中的使用,使用nssm部署成服务的方案脚本,局域网中自定义域名解决https提示不安全的解决方案,以及一路踩过的坑。特点高性能:事件驱......
  • 创建一个vue项目---全局环境搭建
    全局环境搭建一、环境准备1、安装node.js下载地址:https://nodejs.org/en/2、检查是否安装成功:输出版本号说明安装成功3、安装淘宝镜像(淘宝镜像速度比较快)npminstall-gcnpm-registry=https://registry.npm.taobao.org4、检查cnpm是否安装成功cnpm-v二、搭......
  • 启动nginx报错nginx: [emerg] unexpected end of file, expecting "}" in /usr/local/
    启动nginx报错:“nginx:[emerg]unexpectedendoffile,expecting“}”in/usr/local/nginx/conf/nginx.conf:118”重启nginx时,报这么个错:[root@localhostconf]#/usr/local/nginx/sbin/nginx-sreloadnginx:[emerg]unexpectedendoffile,expecting“}”in/usr/lo......