宝塔部署vue项目

这篇具有很好参考价值的文章主要介绍了宝塔部署vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、打包自己的vue项目文件
宝塔部署vue项目
2、宝塔面板登录 并进入左侧网站对应的页面
宝塔部署vue项目
3、添加站点 如果没有域名的可以添加 自己的服务器地址 如果服务器地址已经 添加过了 想在服务器其他端口 展示项目则可以 随便填写过域名 ( 有域名的可以跳到第6步哦
宝塔部署vue项目
4、进入当前添加好了的站点 点击 右侧的设置 进入设置页面
宝塔部署vue项目
5、添加自己服务器的 地址加端口 (端口:自己想要访问前端页面以什么 端口访问)点击添加 然后 点击删除之前随便 添加的域名 这里的48.125.35.65是随便打的
宝塔部署vue项目
6、进入当前创建好了的站点 对应的文件路径 (或者直接点击 根目录就可以进入
宝塔部署vue项目
7、进入当前的目录后可以选择是否删除它的原始文件(最好还是不要删除 .htaccess文件 与 .user.ini文件 这边也不太清楚会不会出现问题) 然后把打包的dist放入进来(这边就不操作放入了)
宝塔部署vue项目
配置反向代理

如果需要操作反向代理的话 进入网站对应页面 设置 找到对应的反向代理 添加反向代理

宝塔部署vue项目

打开高级功能才会出现 代理目录 代理目录要写前端配置的代理的同样的(我这边的前端配置的代理名称为/consumapi 需要在后面添加个/ 才会有效果)代理名称随便写 目标URL 与 发送域名 写自己需要代理地址 内容替换这里看自己的项目(我这边是没有这个) 然后点击提交就可以

宝塔部署vue项目
部署多个项目

vue-router文件 history 模式 base为/consumption/ base表示在所有路由前都会加上/consumption/

宝塔部署vue项目

vue.config.js文件 publicPath pusblicePath 指定子路径

宝塔部署vue项目

在站点的 设置 配件文件里添加该语句 如果路径为/consumption/ 则会到当前站点的根目录下的consumtion文件夹里寻找资源(不知道是不是这样解释的

宝塔部署vue项目

添加的配置文章来源地址https://www.toymoban.com/news/detail-446891.html

 location  ^~ /consumption/ {
    try_files $uri $uri/ /consumption/index.html;
 } 
完整文件
宝塔部署vue项目

到了这里,关于宝塔部署vue项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用宝塔部署Vue项目

    1. Vue项目执行打包命令进行打包得到dist文件夹 2. 打开宝塔主页进入网站,选择添加站点  3. 将自己的服务器网址作为域名,默认为80端口,可自行设置备注和根目录,点击提交  4. 点击设置-配置文件,加入如下代码(配置跨域问题),点击保存(建议手敲,格式很重要)  

    2024年02月12日
    浏览(43)
  • 宝塔部署vue项目

    1、打包自己的vue项目文件 2、宝塔面板登录 并进入左侧网站对应的页面 3、添加站点 如果没有域名的可以添加 自己的服务器地址 如果服务器地址已经 添加过了 想在服务器其他端口 展示项目 则可以 随便填写过域名 ( 有域名的可以跳到第6步哦 ) 4、进入当前添加好了的站

    2024年02月05日
    浏览(48)
  • 宝塔面板+阿里云部署springboot+vue项目

    码了一个多月的vue+springboot前后端分离项目基本上完工了,今天上线,详细记录了一下自己的部署过程,顺便记录一下遇到的坑。 在阿里云购买完服务器后,找到管理台中的实例 查看云服务器详情信息 有两个地址,一个是公网,一个是内网,我们部署项目用的公网。 刚购买

    2024年02月06日
    浏览(54)
  • 如何把vue项目部署服务器(宝塔面板)上

    首先我们把准备好的vue项目进行打包: 输入命令:npm run build    生成dist文件   二、进入宝塔管理界面,点击网站,然后点击添加站点  三。按下面输入  点设置 四。 输入好点添加,注意!!!test.com 可以,有些已经有的不可以(如dada.com),且前面不能加www  (1)这里需要

    2024年02月12日
    浏览(66)
  • 宝塔+docker+jenkins部署vue项目(保姆级教程)

    在软件商城安装Docker管理器 使用命令行 jenkins_home为我创建的目录 可以修改任意目录 我这里设置的端口为8080 启动之前需要在云服务器管理平台和宝塔开通相应端口号 代表成功 首次加载比较慢、需要等待很长时间 到这个页面算是初始化完成了 输入密码路径为 之前设置的路

    2024年02月03日
    浏览(49)
  • 【宝塔面板部署nodeJs项目】网易云nodeJs部署在云服务器上,保姆级教程,写网易云接口用自己的接口不受制于人

    看了很多部署的,要么少步骤,要么就是写的太简洁,对新手不友好 参考链接 网易云音乐API 安装及部署 全过程【本地跑项目以及远端部署 均详解】 服务器如何上线node.js项目【项目放置在github中】 宝塔部署nodejs项目 参考多篇文章,主要为上3篇,才总结本篇 提示:这里可

    2024年02月03日
    浏览(43)
  • 通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南(三更)

    阿里云服务器-FinalShell-宝塔面板。 近期需要将自己的一个SpringBoot+Vue前后端分离项目,并且是分模块开发的项目部署到服务器上,记录一下踩坑的地方,结合C站大佬的解决方案,循循善诱一步步部署到服务器上,简单,快速! 购买服务器,阿里云,腾讯云,华为云等,24周岁

    2024年02月03日
    浏览(64)
  • 华为云云服务器评测 宝塔+nginx 同时部署Springboot、Vue项目

    华为云云服务器评测 第一章 [linux实战] 华为云耀云服务器L实例 Java、node环境配置 华为云云服务器评测 第二章 [linux实战] Unbutnu添加SSH Key、启动Springboot项目 华为云云服务器评测 第三章 [linux实战] 使用Vue3、Element-plus菜单组件构建轮播图 华为云云服务器评测 第四章 [linux实战

    2024年02月10日
    浏览(62)
  • Android Studio项目打包生成可安装在自己手机上的App安装包文件

    点击上方 “ 码农的后花园 ”, 选择 “ 星标 ”  公众号 精选文章,第一时间送达 Android 打包 其实我们现在Android手机上所有的应用都是.apk文件,只不过分为系统自带和第三方,一个.apk文件本质其实就对应于你手机上的一个应用App程序,比如支付宝,淘宝。 .apk文件就是一个

    2024年02月05日
    浏览(97)
  • 将web如vue等项目部署到宝塔docker镜像中,以便能在任意浏览器访问

    仅需确认宝塔面板已经有docker镜像容器 目前新版宝塔面板都已经内置了docker功能模块,如下图: 1、从已经推送的镜像中拉取镜像 如果你用的是docker desktop等工具制作的镜像,并且也已经推送到了 https://hub.docker.com/ 中,即可以在该网站搜索看到对应的镜像,就可以在 宝塔d

    2024年01月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包