返回顶部
首页 > 资讯 > 精选 >Ubuntu中怎么部署vue项目
  • 738
分享到

Ubuntu中怎么部署vue项目

2023-07-04 11:07:19 738人浏览 泡泡鱼
摘要

这篇文章主要介绍“ubuntu中怎么部署Vue项目”,在日常操作中,相信很多人在Ubuntu中怎么部署vue项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ubuntu中怎么部署vue项目”的疑惑有所帮助!

这篇文章主要介绍“ubuntu中怎么部署Vue项目”,在日常操作中,相信很多人在Ubuntu中怎么部署vue项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ubuntu中怎么部署vue项目”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1.安装Nginx

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

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

4.修改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;

}

}

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

nginx -s reload

到此,关于“Ubuntu中怎么部署vue项目”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: Ubuntu中怎么部署vue项目

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

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

猜你喜欢
  • 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
  • Ubuntu如何部署vue项目
    Ubuntu部署vue项目的操作步骤:安装nginx。在vue项目的根目录下执行“npm run bulid:prod”打包vue项目。打包完成后会生成一个dist目录,将其上传到服务器中。修改nginx配置文件/etc/nginx/sit...
    99+
    2024-04-02
  • centos7中怎么部署vue项目
    要在CentOS 7上部署Vue项目,您需要先确保已经安装了Node.js和npm。然后按照以下步骤操作: 在CentOS 7上安...
    99+
    2024-03-07
    centos7 vue
  • Ubuntu部署vue项目的方法是什么
    这篇文章主要介绍了Ubuntu部署vue项目的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Ubuntu部署vue项目的方法是什么文章都会有所收获,下面我们一起来看看吧。1.安装nginx。2.在vu...
    99+
    2023-07-04
  • nginx下怎么部署vue项目
    本篇内容主要讲解“nginx下怎么部署vue项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nginx下怎么部署vue项目”吧!首先要去nginx官网下下载n...
    99+
    2024-04-02
  • Linux下怎么部署vue项目
    本文小编为大家详细介绍“Linux下怎么部署vue项目”,内容详细,步骤清晰,细节处理妥当,希望这篇“Linux下怎么部署vue项目”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.部署Nginx请参考Linux...
    99+
    2023-06-28
  • 怎么使用Nginx部署Vue项目
    本篇内容主要讲解“怎么使用Nginx部署Vue项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用Nginx部署Vue项目”吧!一、安装Nginx 使用XShell连接我们的服务器 配置 ...
    99+
    2023-06-30
  • 怎么把vue项目部署到gitee
    作为一款流行的JavaScript框架,Vue的组件化、数据驱动和单文件组件等特性受到了广泛关注和认可。而Gitee(码云)则是一个集代码托管、项目管理、协作开发、部署上线等功能于一体的开源社区。本文将介绍如何将Vue项目部署到Gitee ...
    99+
    2023-10-22
  • vue项目部署乱码怎么办
    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。vue项目部署乱码怎么办?解决vue项目打包部署后中文乱码项目框架:springmvc + vuevue项目本地调试OK,npm run build后,放到sprin...
    99+
    2023-05-14
    乱码 Vue
  • Thinkphp6 框架中部署vue项目
    记录在thinkphp 框架中部署vue项目的过程 话不多说,让我们直接开始 前端修改打包配置(vue端) 我使用的是 vue3+webpack  所以打包配置修改位置在根目录的 vue.config.js 使用其他脚手架的朋友请对比参考...
    99+
    2023-08-31
    vue.js 前端 javascript php
  • ubuntu中利用nginx部署vue项目的完整步骤
    目录1.安装nginx2.打包上传vue项目到服务器配置nginx访问vue项目常见错误总结1.安装nginx 更新源列表 apt-get update 安装nginx apt-g...
    99+
    2024-04-02
  • Linux中怎么部署一个Vue项目环境
    这篇文章将为大家详细讲解有关Linux中怎么部署一个Vue项目环境,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。安装要将Vuei .js集成到一个项目中,您可以使用CDN包、NPM或CLI。...
    99+
    2023-06-15
  • Vue项目怎么打包部署到GitHub Pages中
    本篇内容介绍了“Vue项目怎么打包部署到GitHub Pages中”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前期准备编译调试通...
    99+
    2023-06-30
  • 怎么把vue项目部署到gitee上
    随着前端技术的发展,越来越多的公司或个人开始使用Vue来开发前端项目。但是,项目开发完成后,如何将其部署到云端呢?在这篇文章中,我们将探索如何将Vue项目部署到Gitee上,让您能够轻松地将您的项目展示给世界。创建Gitee仓库首先,您需要...
    99+
    2023-10-22
  • gitee如何部署vue项目
    今天小编给大家分享一下gitee如何部署vue项目的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先,我们需要明确一个概念,...
    99+
    2023-07-05
  • vue项目怎么部署到虚拟主机
    要将Vue项目部署到虚拟主机,需要按照以下步骤进行操作:1. 打包Vue项目:在项目根目录下运行命令`npm run build`,...
    99+
    2023-08-26
    vue 虚拟主机
  • Node.js中怎么部署项目的选项
    这篇文章主要讲解了“Node.js中怎么部署项目的选项”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Node.js中怎么部署项目的选项”吧!一:使用Node.js内置的HTTP模块Node....
    99+
    2023-07-05
  • Flask项目怎么部署
    本文小编为大家详细介绍“Flask项目怎么部署”,内容详细,步骤清晰,细节处理妥当,希望这篇“Flask项目怎么部署”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。宝塔更新Python版本因为在宝塔中的Python...
    99+
    2023-06-29
  • nginx中怎么部署访问vue-cli搭建的项目
    本篇内容主要讲解“nginx中怎么部署访问vue-cli搭建的项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nginx中怎么部署访问vue-cli搭建的项目”吧!用history模式构建的项...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作