在nginx 服务器部署vue项目

以人人快速开发的开源项目:renren-fast-vue 为例

注:这里开始认为各位都会使用nginx

打包vue项目

npm run build

测试打包的项目是否可以运行

serve dist

图片

可以正常运行

编译报错请移步到:renren-fast-vue@1.2.2 项目编译报错: build gulp

部署vue项目到nginx

接下来将renren-fast-vue 项目生成的dist 目录修改为:renren-fast-vue 并压缩为:renren-fast-vue.zip

复制renren-fast-vue.zip 到服务器

解压到:/usr/local/nginx/

vue项目的nginx配置文件不直接在nginx.conf中进行配置,将配置保存在/usr/local/nginx/conf/vhost/renren-fast-vue.conf

配置内容为:vi /usr/local/nginx/conf/vhost/renren-fast-vue.conf

server {listen   7000;server_name  www.renrenfastvue.com;#charset koi8-r;#access_log  logs/host.access.log  main;#项目的根目录root /usr/local/nginx/renren-fast-vue;#网站根入口location / {# 此处的 @router 实际上是引用下面的转发,否则在 Vue 路由刷新时可能会抛出 404try_files $uri $uri/ @router;# 请求指向的首页index index.html;}# 由于路由的资源不一定是真实的路径,无法找到具体文件# 所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源location @router {rewrite ^.*$ /index.html last;}
}

将renren-fast-vue项目的配置文件:/usr/local/nginx/conf/vhost/renren-fast-vue.conf 导入到nginx.conf

vi /usr/local/nginx/conf/nginx.conf 
在nginx.conf中http块导入文件的指令 
include ./vhost/renren-fast-vue.conf

管理nginx

检查语法:nginx -t 
启动:nginx 
重启:nginx -s reload 
停止:nginx -s stop

测试服务

检查nginx 监听的端口是否启动成功:netstat -anp|grep nginx 
测试renren-fast-vue的首页是否可以访问:curl -I http://127.0.0.1:7000/

图片

到目前为止vue项目部署成功了,接下来通过浏览器,用域名访问

域名为:server_name www.renrenfastvue.com;

在windows 的 C:\Windows\System32\drivers\etc\hosts 文件配置DNS 域名解析

图片

在浏览器地址栏输入:http://www.renrenfastvue.com:7000/

登录的默认账号密码是:admin

图片

ps:如果监听端口为80,则不需要在域名后面添加端口

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/723539.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024三掌柜赠书活动第十三期:API安全技术与实战

目录 前言 API安全威胁与漏洞 API安全技术与实践 API安全实战案例 关于《API安全技术与实战》 编辑推荐 内容简介 作者简介 图书目录 书中前言/序言 《API安全技术与实战》全书速览 结束语 前言 随着互联网的快速发展和应用程序的广泛使用,API&#xff…

docker中的具名和匿名挂载

1. 匿名挂载 -v 容器内路径 [rootwq ~]# docker run -d -P --name nginx01 -v /etc/nginx nginx b250dffbd5f0d1cb0e4717dab6bf5212ae378869099aa1a6ece08a25519554a7查看所有的volume的情况 [rootwq ~]# docker volume ls DRIVER VOLUME NAME local 2bc73b32eed4d0…

贪心刷题3-合并果子

题目来源:[NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G - 洛谷 参考书目:《深入浅出程序设计竞赛(基础篇)》 解题思路:这道题的关键在于每次选择合并时都要选择最小的两堆果子来合并,从而保…

MySQL 元数据锁及问题排查(Metadata Locks MDL)

"元数据"是用来描述数据对象定义的,而元数据锁(Metadata Lock MDL)即是加在这些定义上。通常我们认为非锁定一致性读(简单select)是不加锁的,这个是基于表内数据层面,其依然会对表的元…

python中的类

_init_()函数 所有类都有一个名为__init__()的函数,它在每次使用类创建新对象时都会自动执行,可用于将用户指定的值在初始就赋给对象的属性,或者在创建对象时执行一些固定操作,如下: class Person:def __init__(self…

Python之Web开发初学者教程—ubuntu下vi的使用

Python之Web开发初学者教程—ubuntu下vi的使用 vi\vim 文本编辑器 i 切换到输入模式,以输入字符。 x 删除当前光标所在处的字符。 : 切换到底线命令模式,以在最底一行输入命令。 vi 保存并退出:esc键退出编辑-…

网络学习:Vlan原理

目录 一、交换机对数据帧的处理 1、Access: 2、Trunk: 3、Hybrid: 二、VLAN的划分方式 三、VLAN信息的传播技术(MVRP协议) 1、VLAN动态注册背景: 2、MVRP技术: 3、MVRP注意点&#xff…

前缀和与差分——练习(一维+二维)

一、前言 前缀和与差分算是很常用的算法,熟记是有必要的。 ——题目来源y总每日一题,感觉正适合模板分块讲解系列。 二、浅谈 我们可以用a数组作为前缀和数组,b数组作为差分数组,因为二者互为逆运算。 他们常常用做优化&#xff…

Python爬虫——Selenium

简介 Selenium是一个自动化测试框架,可以通过编程语言控制浏览器进行各种操作。在Python中,可以使用Selenium实现爬虫。 首先,我们需要需要安装Selenium库。可以使用pip命令安装: pip install selenium要使用的话我们还需…

7-Zip:一款免费开源但强大的压缩软件

名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 一、什么是7-zip?①为什么选择7-Zip?②7-Zip的主要特点二、下载安装三、如何使用7-Zip?四、总结很高兴你打开了这篇博客,如有疑问,欢迎评论…

密码学之椭圆曲线

引言 DH(Diffie-Hellman)密钥交换算法于1976年提出,是第一个公开密钥交换算法。其基础是数学中的群论,群论也是大多数公开密钥密码的基础。简单来说,群是一组元素的集合以及在这些元素上定义的特殊二元运算。 一个群需要满足如下性质: 封闭性:群中两个元素的运算结果仍…

用于生成环境噪声的Noisedash

本文中关于音频的专业描述,来自于互联网和 ChatGPT; 什么是白噪声 ? 白噪声(White Noise)是具有平均功率的随机信号,其功率在整个频谱范围内均匀分布。它的能量在所有频率上都是相等的,没有频率…

【Linux C | 网络编程】广播概念、UDP实现广播的C语言例子

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

代码随想录算法训练营第33天—动态规划01 | ● 理论基础 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

动态规划理论基础 https://programmercarl.com/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 视频:https://www.bilibili.com/video/BV13Q4y197Wg 主要题型 动规基础题 斐波那契数列 背包问题打家劫舍股票问题子序列问题 解题…

伟大音乐家的伟大不朽作品,贝多芬一生的音乐作品全集

一、音乐描述 贝多芬一生创作题材广泛,重要作品包括9部交响曲、1部歌剧、32首钢琴奏鸣曲、5首钢琴协奏曲、多首管弦乐序曲及小提琴、大提琴奏鸣曲等。因为其对古典音乐的重大贡献,以及对奏鸣曲式和交响曲套曲结构的发展和创新,而被后世尊称为…

【比较mybatis、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp操作数据】操作批量新增、分页查询(四)

orm框架使用性能比较 比较mybatis、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp操作数据 环境: idea jdk17 spring boot 3.0.7 mysql 8.0测试条件常规对象 orm 框架是否支持xml是否支持 Lambda对比版本编码方式mybatis☑️☑️3.5.4lambda xml 优化sq…

【记录31】elementUI el-tree 虚线、右键、拖拽

父组件 <eltree :treeData"treeData"></eltree>import eltree from "../../components/tree.vue"; export default {name: ,components: { // org_tree ,eltree},watch: {},data() {return {orgFormchoose: {},orgForm: { type: 0, limits: 1…

Python乱码恢复

比如说网页是ISO-8859-1编码&#xff0c;然后requests得到的是乱码&#xff0c; 那么这样操作就可以还原数据&#xff1a;res.text.encode(‘ISO-8859-1’).decode(‘utf-8’) 乱码恢复网站&#xff0c;可以知道是什么编码http://www.mytju.com/classCode/tools/messyCodeReco…

CRC8/CRC16/CRC32全面对比详解

在现代数据通信和存储技术中&#xff0c;CRC&#xff08;Cyclic Redundancy Check&#xff0c;循环冗余校验&#xff09;算法作为一种关键的错误检测机制&#xff0c;在确保数据完整性方面扮演着不可或缺的角色。该算法基于一个特定的生成多项式对原始数据块进行模2除法运算&am…

Stable Diffusion——Animate Diff一键AI图像转视频

前言 AnimateDiff 是一个实用框架&#xff0c;可以对文本生成图像模型进行动画处理&#xff0c;无需进行特定模型调整&#xff0c;即可为大多数现有的个性化文本转图像模型提供动画化能力。而Animatediff 已更新至 2.0 版本和3.0两个版本&#xff0c;相较于 1.0 版本&#xff…