广告
返回顶部
首页 > 资讯 > 精选 >Ubuntu如何部署vue项目
  • 395
分享到

Ubuntu如何部署vue项目

2024-04-02 19:04:59 395人浏览 独家记忆
摘要

ubuntu部署Vue项目的操作步骤:安装Nginx。在vue项目的根目录下执行“npm run bulid:prod”打包vue项目。打包完成后会生成一个dist目录,将其上传到服务器中。修改nginx配置文件/etc/nginx/sit

Ubuntu如何部署vue项目

ubuntu部署Vue项目的操作步骤:

安装Nginx

在vue项目的根目录下执行“npm run bulid:prod”打包vue项目。

打包完成后会生成一个dist目录,将其上传到服务器中。

修改nginx配置文件/etc/nginx/sites-enabled/default,例如:

server {

listen 80;

listen [::]:80;

server_name 127.0.0.1:80; # 服务器域名或IP+端口

root /data/blog/backend/dist; # 打包后的dist目录

index index.html;

location / {

try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404

}

# 对应上面的 @router,主要Vue请求并不是真实路径,无法找到文件,需要重定向到 index.html 中,然后交给路由处理

location @router {

rewrite ^.*$ /index.html last;

}

}

输入命令重新加载配置文件即可。

nginx -s reload

--结束END--

本文标题: Ubuntu如何部署vue项目

本文链接: https://www.lsjlt.com/news/113263.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Ubuntu如何部署vue项目
    Ubuntu部署vue项目的操作步骤:安装nginx。在vue项目的根目录下执行“npm run bulid:prod”打包vue项目。打包完成后会生成一个dist目录,将其上传到服务器中。修改nginx配置文件/etc/nginx/sit...
    99+
    2022-10-10
  • Ubuntu中怎么部署vue项目
    这篇文章主要介绍“Ubuntu中怎么部署vue项目”,在日常操作中,相信很多人在Ubuntu中怎么部署vue项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ubuntu中怎么部署vue项目”的疑惑有所帮助!...
    99+
    2023-07-04
  • ubuntu中怎么用nginx部署vue项目
    这篇文章主要介绍“ubuntu中怎么用nginx部署vue项目”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ubuntu中怎么用nginx部署vue项目”文章能帮助大家解决问题。1.安装nginx更...
    99+
    2023-06-29
  • gitee如何部署vue项目
    今天小编给大家分享一下gitee如何部署vue项目的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先,我们需要明确一个概念,...
    99+
    2023-07-05
  • Ubuntu部署vue项目的方法是什么
    这篇文章主要介绍了Ubuntu部署vue项目的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Ubuntu部署vue项目的方法是什么文章都会有所收获,下面我们一起来看看吧。1.安装nginx。2.在vu...
    99+
    2023-07-04
  • 如何实现Docker部署vue项目
    这篇文章主要介绍“如何实现Docker部署vue项目”,在日常操作中,相信很多人在如何实现Docker部署vue项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何实现Do...
    99+
    2022-10-19
  • ubuntu中利用nginx部署vue项目的完整步骤
    目录1.安装nginx2.打包上传vue项目到服务器配置nginx访问vue项目常见错误总结1.安装nginx 更新源列表 apt-get update 安装nginx apt-g...
    99+
    2022-11-13
  • vue项目部署乱码如何解决
    这篇文章主要介绍“vue项目部署乱码如何解决”,在日常操作中,相信很多人在vue项目部署乱码如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目部署乱码如何解决”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-07-04
  • 如何利用rancher2来部署vue项目
    随着前端技术的不断发展,越来越多的项目开始采用Vue.js作为前端框架。在实际部署过程中,如何将Vue.js项目通过Rancher2部署呢?下面就来介绍一下具体的步骤。一、创建项目首先需要在Rancher2中创建一个新的项目,用来部署Vue...
    99+
    2023-05-14
  • Linux下怎么部署vue项目
    本文小编为大家详细介绍“Linux下怎么部署vue项目”,内容详细,步骤清晰,细节处理妥当,希望这篇“Linux下怎么部署vue项目”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.部署Nginx请参考Linux...
    99+
    2023-06-28
  • nginx下怎么部署vue项目
    本篇内容主要讲解“nginx下怎么部署vue项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nginx下怎么部署vue项目”吧!首先要去nginx官网下下载n...
    99+
    2022-10-19
  • 云服务器部署vue项目
    Vue是一种轻量级框架,可以在Web应用程序中使用。以下是一个简单的Vue项目(示例): 安装Vue Vue可以很容易地安装在Python 2.6或更高版本上。请确保您已经安装了Python和Vue模块,以便您可以使用它来创建和运行V...
    99+
    2023-10-26
    服务器 项目 vue
  • apache服务器部署vue项目
    随着前端开发技术的迅速发展,越来越多的静态页面项目被打包成了SPA(Single Page Application,即单页应用),而Vue.js作为其中的佼佼者,便成为了越来越多前端开发者的首选。Vue.js的部署方式有很多,其中一个比较常...
    99+
    2023-05-24
  • Thinkphp6 框架中部署vue项目
    记录在thinkphp 框架中部署vue项目的过程 话不多说,让我们直接开始 前端修改打包配置(vue端) 我使用的是 vue3+webpack  所以打包配置修改位置在根目录的 vue.config.js 使用其他脚手架的朋友请对比参考...
    99+
    2023-08-31
    vue.js 前端 javascript php
  • 如何将Vue项目部署到服务器
    这篇文章主要介绍了如何将Vue项目部署到服务器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。相信很多小伙伴在用Vue-cli安装的脚手架开发...
    99+
    2022-10-19
  • 如何使用github部署前端vue项目
    本文小编为大家详细介绍“如何使用github部署前端vue项目”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何使用github部署前端vue项目”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。直接上手搞先整出一...
    99+
    2023-07-02
  • vue cli 3.x项目如何部署到github pages
    这篇文章主要介绍了vue cli 3.x项目如何部署到github pages,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. vue-r...
    99+
    2022-10-19
  • k8s如何部署java项目
    这篇文章给大家分享的是有关k8s如何部署java项目的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。下载jar的包[root@master test]# wget https://dl...
    99+
    2023-06-22
  • Nginx如何部署SpringBoot项目
    本篇内容介绍了“Nginx如何部署SpringBoot项目”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!新建一个yml文件 applicat...
    99+
    2023-07-05
  • docker如何部署php项目
    要部署一个PHP项目,您可以按照以下步骤使用Docker进行部署:1. 创建一个Dockerfile:在项目根目录下创建一个名为Do...
    99+
    2023-09-20
    docker php
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作