如何把vue项目部署服务器(宝塔面板)上

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

一,vue项目打包

首先我们把准备好的vue项目进行打包:

输入命令:npm run build    生成dist文件

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端

 

二、进入宝塔管理界面,点击网站,然后点击添加站点

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端

 三。按下面输入

 点设置

四。 输入好点添加,注意!!!test.com 可以,有些已经有的不可以(如dada.com),且前面不能加www

 (1)这里需要删除一开始创建的114.56.55.198

(2)添加成功后点伪静类

五。 按下面输入,点击保存,  提示!!! 下面不输入可能导致404 not Found

location / {
  if (!-e $request_filename) {
    rewrite  ^(.*)$ /index.html?s=/$1  last;
    break;
  }
}

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端

六。 找到指定文件(文件地址和文件名在第三步设置的)

 七。上传刚才打包好的dist文件 

点击上传,上传目录,选择dist文件,点击开始上传

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端

上传好如下图

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端 

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端

 八,点网站,点击设置,选择网站目录,检查网站目录和运行目录是否和刚才上传dist文件目录一致,不一致需要修改 

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端 

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端

 网址输入 test.com 结果访问成功

 Tips:

如果输入地址还是打不开,那么可能是以下几个原因

1,域名被用了,重新随便填个(如test.com,testtest.com)

 2.检查伪静态是否填写以及网站目录地址运行目录地址是否正确

3.在软件商店找到Nginx ,点设置,配置设置里,新增一段代码。贴到指定位置

宝塔部署vue项目,宝塔相关,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-664458.html

贴代码 

  location  ^~ /consumption/ {
            try_files $uri $uri/ /consumption/index.html;
          } 

0k了

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

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

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

相关文章

  • 如何快速搭建自己的阿里云服务器(宝塔)并且部署springboot+vue项目(全网最全)

    对于新手或者学生党来说,有时候就想租一个云服务器来玩玩或者练练手,duck不必花那么多钱去租个服务器。这些云服务厂商对学生和新手还是相当友好的。下面将教你如何快速搭建自己的阿里云服务器,完成云服务器的部署。 现在阿里云对于新用户来说,还是挺仗义的,

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

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

    2024年02月03日
    浏览(31)
  • Vite打包Vue3项目,利用宝塔部署到服务器

    按照如图的配置,将vite.config.js的 base 改为  /dist/ 然后npm run build 就会得到左边的这个dist文件夹,这就是打包好的文件 创建项目以及项目配置 我在服务器安装的php是5.6版本的,其他版本可以自己试一下 解决刷新404问题 上传成功之后,文件目录结构是这样的 (顺序不一定要

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

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

    2024年02月10日
    浏览(46)
  • 云服务器中Linux如何安装宝塔面板?

    作者:西瓜程序猿 主页传送门:https://www.cnblogs.com/kimiliucn 官方使用手册:https://www.kancloud.cn/chudong/bt2017/424204 宝塔Linux面板是提升运维效率的服务器管理软件,目前使用免费的版本功能齐全,已经足够使用了。 [西瓜程序猿]使用阿里云服务器网以CentOS操作系统为例,安装宝塔

    2024年02月10日
    浏览(38)
  • 如何使用宝塔面板搭建网站(Linux服务器配置篇)

    搭建网站我们需要: 必须是Linux服务器 (最低要求配置1核1G当然再低些也能运行但是不建议) 自己的域名(可以去阿里云或者腾讯云了解) PHP项目   此处展示的是华为云服务器 (各个服务器的购买和使用差别不大,这里提供参考) 登录之后点击控制台  点击右上角的搜索

    2024年02月07日
    浏览(50)
  • 云耀服务器L实例搭配负载均衡部署Linux 可视化宝塔面板

    华为云云耀服务器L实例是一种高性能、高可靠性的云服务器实例,适用于大规模企业级应用、大数据分析等场景。它基于华为最新一代的硬件虚拟化技术,提供了更高的计算、存储和网络性能,同时保障了数据安全和隐私保护。 云耀云服务器L实例官网:https://www.huaweicloud.co

    2024年01月21日
    浏览(44)
  • linux 服务器利用宝塔面板部署.net 6(.net core)服务端程序图文步骤

    随着.net core 跨平台技术的兴起,微软.net拥抱云原生,支持跨平台,可以使基于.net core技术的服务端程序轻松移植到基于Linux的云服务器上,本文以图文的方式介绍如何利用阿里云轻量应用服务器安装宝塔面板部署基于.net core的后端服务器接口程序并正常运行。 步骤 准备一台

    2024年02月14日
    浏览(41)
  • 华为云云耀云服务器L实例评测|华为云云耀云服务器L实例购买及宝塔面板详细部署

    随着云计算时代的进一步深入,越来越多的中小企业企业与开发者需要一款简单易用、高能高效的云计算基础设施产品来支撑自身业务运营和创新开发。华为云焕新推出的云耀云服务器L实例,正是满足企业和开发者需求的完美选择。 提示:以下是本篇文章正文内容,下面案

    2024年02月08日
    浏览(46)
  • 【服务器】安装宝塔面板

    目录 🌺【前言】 🌼【前提】连接服务器 🌷方式一 使用工具登录服务器如Xshell 🌷方式二 阿里云直接连接 🌼 1. 安装宝塔 🌷获取安装脚本 方式一 使用下面提供的脚本安装 方式二 使用官网提供的脚本安装 🌷脚本安装详情 🌼2. 服务器添加宝塔占用的端口号 🌷2.1 阿里云

    2024年01月25日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包