Windows服务器部署前端vue项目_windows部署vue项目-程序员宅基地

技术标签: nginx  服务器  vue.js  windows  

阿里云Windows服务器部署前端vue项目

准备工作

  1. 下载node.js(略)http://nodejs.cn/download/
  2. 下载Nginx http://nginx.org/en/download.html
  3. Nginx安装启用方法参考:参考1参考2
    注意:刚下载完Nginx后,没有配置环境变量的情况下,需要去Nginx文件下使用命令窗口操作
Nginx
  1. 下载完后是这样子
    在这里插入图片描述

  2. 把打包好的dist文件放入html目录下
    在这里插入图片描述

  3. 找到conf/nginx.config文件,用文本方式打开,进行修改
    在这里插入图片描述

在这里插入图片描述

  1. 此时你在服务器的浏览器上访问:localhost:8080 就可以展示前端页面了
    在这里插入图片描述
注意!坑来了~
  1. 如果你页面显示的js、css路径不对的话,在前端项目vue.config.js中把路径改为./
    在这里插入图片描述

  2. 如果你在浏览器上把localhost改为公网ip的话,无法访问 ???

    不要慌~
    如果你是第一次使用服务器,那么需要在云服务器上设置安全组
    在这里插入图片描述

    想下面这样在 入方向 里添加一条就行(默认有三条,根据你配置的端口号去手动添加一条)

    在这里插入图片描述

    重启一下Nginx

    nginx -s stop
    start nginx
    

    把localhost改成公网ip,就可以访问了

在这里插入图片描述

Nginx详细配置:https://www.cnblogs.com/dongye95/p/11096785.html#_label0_3

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43193877/article/details/123253466

智能推荐

ps新手秒变大师必备的Ps插件全在这!(mac版本)_delicious retouch 5 mac-程序员宅基地

文章浏览阅读3k次。作为设计师Photoshop可谓神器,不论你是何种设计师多多少少都会用到它。随着时代的发展,对效率越来越注重,ps虽功能强大,但不是大神级别的炉火纯青,用起来还是比较浪费时间的,这是设计公司永远不会说的秘密。 今天专为使用Mac的同学们带来的是10款必备常用ps扩展插件合集!美工修图必备!1.Delicious Retouch 5.0 (DR5)白金版Delicious Retouch5 白金版 for mac(PS磨皮插件DR5)立即下载Delicious Retouch5 白金版 for mac_delicious retouch 5 mac

如何将图像从 React Native 上传到 Laravel API_react native launchimagelibrary 如何上传图片-程序员宅基地

文章浏览阅读410次。聚优影视TV双播盒子,内置多个资源接口,开源TVBOX制作!如今,开发人员同时处理前端和后端项目是很常见的。根据最近的一项开发人员调查,React Native 是全球最流行的用于构建跨平台移动应用程序的框架之一。Laravel 是一个 PHP Web 框架,具有优雅的代码结构,开发人员可以使用它来创建 REST API。Laravel 目前有71k 的 GitHub 星数,证明了它在开发者社区中的受欢迎程度。_react native launchimagelibrary 如何上传图片

sql函数--05---SQL----coalesce函数详解_sql coalesce-程序员宅基地

文章浏览阅读1.8k次,点赞4次,收藏5次。提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录coalesce函数背景:语法:COALESCE ( expression,value1,value2……,valuen)流程:举例:应用 1 :进行空值处理查询学生成绩,如果查不到,则赋值为0应用 2 :进行默认处理返回人员的“重要日期”if( , ,)函数也可以coalesce函数背景:主流数据库系统都支持COALESCE()函数, MYSQL、MSSQLServer、DB2、Oracle:这个函数主要用来进行空值处_sql coalesce

vue项目中 实现复制功能_vue 复制dom元素-程序员宅基地

文章浏览阅读1.5k次。vue使用插件vue 可使用 vue-clipboard 插件npm i vue-clipboard2 -S 安装插件在main.js 中引入import VueClipboard from ‘vue-clipboard2’Vue.use(VueClipboard)<el-input v-model="input" size="mini" placeholder="请输入内容"></el-input><el-button type="text" icon="_vue 复制dom元素

Spring Boot 2.0 设置Session过期时间_websocket 空闲过期时间-程序员宅基地

文章浏览阅读9.3k次,点赞3次,收藏3次。最近开发的一套基于WebSocket+Spring Boot2.0 的客服系统,测试完上线发现隔十分钟未操作websocket自动掉线,隔半个小时左右再刷新页面就跳转回登录界面了,才醒悟到自己没有加入心跳机制以及设置session过期时间,上网查了一下其他大牛的博客。在配置文件application.properties 加入了如下一行:以分钟(m)为单位,设置为150m后,放到一边测..._websocket 空闲过期时间

d435i 相机和IMU联合标定_aprilgrid 6x6 0.5x0.5 m (unscaled)-程序员宅基地

文章浏览阅读831次。一、前提我们已经对RGB摄像头和IMU进行了单独标定。参考之前博文。RGB标定IMUkalibr官方WIKI:Kalibr二、准备标定文件2.1 标定板yaml文件标定下载链接Aprilgrid 6x6 0.5x0.5 m (unscaled)Aprilgrid标定板yaml文件yamltarget_type: 'aprilgrid' #gridtypetagCols: 6 #number of apriltagstagRows: 6 _aprilgrid 6x6 0.5x0.5 m (unscaled)

随便推点

Bug基础-程序员宅基地

文章浏览阅读131次。1.缺陷报告的定义软件不正常的错误或者是代码行错误等均衡成为缺陷2.缺陷的种类:功能不正常软件在使用上感觉不方便软件的结构未做良好规划提供的功能不充分与软件操作者的互动不良使用性能不佳未做好错误处理边界错误计算错误使用一段时间所产生的错误控制流程的错误在大数据量压力下所产生的错误在不同硬件环境下产生的错误版本控制不良导致的错误软件文档的错误3.将缺陷按照严重程度划分系统崩溃,严重,一般,次要,建议4.解决bug的优先级高,中,低5.按照测试种类分:逻辑功能类性_bug基础

macOS高端使用技巧_mac指标高级运用?-程序员宅基地

文章浏览阅读185次。Macos 的占有量不如 Windows,两者之间当操作方式也有很大的不同,当很多人熱悉 Windows 的操作之后,再接触 macos,觉得难上手,其实是习惯问题。如果你学习一些技巧,会觉得 macos 其实也不错,某些方面,甚至远远优于 Windows。很多人说 macos 这效率上会优于 Windows,这点必须承认,毕竟 macos 包括其平台下的软件,有很多的快捷键,并且感觉苹果也有意让大家多多利用快捷键。那么多的快捷键,并且 control 和 command 在使用上,没有一定的规律可循,导_mac指标高级运用?

金融风控_特征衍生案例代码实现_放款中数据分析_交费数据特征衍生-程序员宅基地

文章浏览阅读694次。对creat_dt做补全,用oil_actv_dt来填补 截取6个月的数据。构造变量的时候不能直接对历史所有数据做累加。否则随着时间推移,变量分布会有很大的变化。_交费数据特征衍生

排序算法基本介绍及python实现(含详细注释)_python选择排序详细写法与注释-程序员宅基地

文章浏览阅读1.1w次,点赞165次,收藏276次。对数组排序可以说是编程基础中的基础,本文对八种排序方法做简要介绍并用python实现。代码中注释很全,适合复习和萌新学习。这是刚入学自己写的,可能难免比不上标准的写法,但是懒得改了。文末会放和排序相关的基本拓展总结链接。看不明白可以看群里视频注意排序实现的具体方式,不要用局部变量,否则占空间太多,和空间复杂度不符。好,我们开始。选择排序选择排序(Selection sor..._python选择排序详细写法与注释

Python入门基础篇 No.52 —— 返回值详解_定义打印n个星号的无返回值的函数-程序员宅基地

文章浏览阅读636次。Python入门基础篇 No.52 —— 返回值详解文章目录Python入门基础篇 No.52 —— 返回值详解前言一、返回值总结前生篇:形参和实参_文档字符串_函数注释前言一、返回值return 返回值要点:如果函数体中包含 return 语句,则结束函数执行并返回值;如果函数体中不包含 return 语句,则返回 None 值。要返回多个返回值,使用列表、元组、字典、集合将多个值“存起来”即可。定义一个打印 n 个星号的无返回值的函数代码演示:def pr_定义打印n个星号的无返回值的函数

堆机制利用之fastbin-程序员宅基地

文章浏览阅读2.2k次,点赞5次,收藏13次。堆机制利用之fastbin前半部分:基于libc2.23(无tcache)堆机制(fastbin等)想要了解堆的机制利用方法必须要先了解堆的基本机制以及结构目前主要使用的内存管理库是ptmalloc,而在ptmalloc中,用户请求的空间由名为chunk的数据结构表示下面就是一个标准的chunk结构该chunk中,**prev_size参数为前一chunk(如果未被使用)的大小,size参数为该chunk的大小,而P参数(pre_insue)为标志位,标志前一个chunk的使用情况。**而上述_fastbin

推荐文章

热门文章

相关标签