nginx 下载地址:http://nginx.org/en/download.html 下载后直接解压,cmd 进入到解压目录运行 start nginx 即可启动

常用命令:

 nginx -s stop   直接干掉服务

 start nginx     启动服务

 nginx -s quit         优雅停止nginx,有连接时会等连接请求完成再杀死worker进程

nginx -s reload     优雅重启,并重新载入配置文件nginx.conf

nginx -s reopen     重新打开日志文件,一般用于切割日志

nginx -v            查看版本

nginx -t            检查nginx的配置文件

nginx -h            查看帮助信息

nginx -V       详细版本信息,包括编译参数

nginx  -c filename  指定配置文件

部署

1. vue配置

  1. 修改项目 build 目录下 utils.js 文件: 将 publicPath 修改为 publicPath:'.../../'   防止打包后找不到静态文件的问题  

    

  2. 修改项目 config 目录下 index.js 文件:将 assetsPublicPath 改为: assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题

    

  3. npm run build 打包

2. nginx配置(将 vue 打包好的  dist 文件丢到 nginx 的html 目录下)

  1.  打开 nginx目录下的 conf \ nginx.conf 文件

  2. 配置端口号与访问地址:

    在 server { ...... } 中配置  listen  与 server_name

    

       将 location 中的 root 根路径 文件修改为 vue 的dist目录(将 vue的dist 放入到 nginx html文件中后,修改为:  root     html\dist;  即可), index = vue中dist文件中的index.html文件(root 指向了  dist,写作  index    index.html  index.html  即可)

    

  3. 解决vue在浏览器中输入路由地址出现404的问题(重要)

   在 server { ...... } 中插入如下代码

......
server{
......
# 解决vue在浏览器中输入路由地址出现404的问题
location / {
root html\dist;
index index.html index.htm;
try_files $uri $uri/ @router; # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
} location @router {
rewrite ^.*$ /index.html last;
}
......
}
......

  4. 解决 axios 代理问题(重要)

   1> 将下图中的代码取消注释(将前面的 ‘#’ 删掉即可)

    

   2> 将 ~ \.php$ 修改为项目中的代理关键字,如下图所示:

     

   3> 将  proxy_pass   的值改为需要访问的 服务器地址 即可

  

欢迎浏览博主站点:http://www.devloper.top/(有免费的教学视频、博客文章与在线工具)

Vue 之 Nginx 部署的更多相关文章

  1. vue+uwsgi+nginx部署路飞学城

    vue+uwsgi+nginx部署路飞学城   有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码 ht ...

  2. linux vue uwsgi nginx 部署路飞学城 安装 vue

    vue+uwsgi+nginx部署路飞学城 有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码#这个代码 ...

  3. vue+uwsgi+nginx部署luffty项目

    在部署项目之前本人已经将前端代码和后端代码发布在了一个网站上,大家可自行下载,当然如果有Xftp工具也可以直接从本地导入. django代码 https://files.cnblogs.com/fil ...

  4. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  5. vue+uwsgi+nginx部署项目

    首先先下载好前后端项目 先从前端vue搞起 要在服务器上,编译打包vue项目,必须得有node环境 下载node二进制包,此包已经包含node,不需要再编译 wget https://nodejs.o ...

  6. 14,vue+uwsgi+nginx部署路飞学城

    有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码 https://files.cnblogs.com/ ...

  7. Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx)

    Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx) 一丶集群和Nginx反向代理 ...

  8. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  9. 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

随机推荐

  1. datatables scrollX设置水平滚动无效问题

    如下:设置了水平滚动之后, 页面并没有滚动效果$(document).ready(function() { $('#example').dataTable( { "scrollX" ...

  2. 后缀数组【原理+python代码】

    后缀数组 参考:https://blog.csdn.net/a1035719430/article/details/80217267 https://blog.csdn.net/YxuanwKeith ...

  3. CS5211替代CH7511B|设计DP转LVDS转接板|替代CH7511B

    CH7511B是一款DP转lvds屏转换芯片CH7511B是一款eDP转LVDS转换芯片.CH7511B将嵌入式DisplayPort信号转换为LVDS(低压差分信号).通过CH7511B的高级解码/ ...

  4. CS5216 设计于DP转HDMI转换器|DP转HDMI 1080P中继器 电平转化器开关设计方案与线路图

    CS5216是一款Displayport to hdmi 1080p音视频信号转换芯片,主要用于设计与开发DP转HDMI 转换器.中继器.电平转换器等产品当中.它支持交流和直流耦合TMDS信号高达1. ...

  5. nssm常用命令(在Windows系统下安装服务的工具)

    nssm install servername //创建servername服务 nssm start servername //启动服务 nssm stop servername //暂停服务 ns ...

  6. Ranger-Yarn插件安装

    Ranger-Yarn插件ranger-0.6.0-yarn-plugin安装到Yarn的所有ResourceManager节点, 其他的NodeManager节点不需要安装. 登陆hdfs安装的用户 ...

  7. Kibana_X-Pack管理Elasticsearch权限

    在Kibana上面配置权限,验证对Elasticsearch权限控制, 主要步骤如下: 1.创建角色 2.创建用户,并且赋予用户角色 3.用户登陆,验证没有权限 4.赋予角色权限 5.用户登陆,验证拥 ...

  8. Zookeeper基础教程(四):C#连接使用Zookeeper

    Zookeeper作为分布式的服务框架,虽然是java写的,但是强大的C#也可以连接使用. C#要连接使用Zookeeper,需要借助第三方插件,而现在主要有两个插件可供使用,分别是ZooKeeper ...

  9. 怎样在idea添加log日志 以及log4j2配置文件解读

    网上找了很多篇文章,就数这篇比较全,从下载到配置都有讲到,解决从0开始接触java日志文件添加的各位同学.参考文章:https://www.cnblogs.com/hong-fithing/p/769 ...

  10. python appium使用uiselector定位时,提示 Could not parse UiSelector argument: 'XXX' is not a string

    运行自动化代码,appium返回Could not parse UiSelector argument: 'XXX' is not a string,其中的xxx就是定位的元素 解决方案:外侧用 '' ...