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. 【LeetCode】430. Flatten a Multilevel Doubly Linked List 解题报告(Python)

    [LeetCode]430. Flatten a Multilevel Doubly Linked List 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: ...

  2. C++ std-11 常用方法

    对多个值取最值 C++标准库提供了获取最大值和最小值的方法: int mi = std::min(x1, x2); int ma = std::max(x1, x2); 如果想获取超过两个数的最值呢? ...

  3. Spring企业级程序设计 • 【第5章 Spring MVC快速入门】

    全部章节   >>>> 本章目录 5.1 Spring MVC设计概述及其框架结构 5.1.1 Spring MVC介绍 5.1.1 Spring MVC优势 5.1.2  S ...

  4. 最详细的git使用教程

    git的安装可以参考我的博客:https://www.cnblogs.com/shanfeng1000/p/10969116.html 一.工作流程 Git 工作流程一般是: 克隆 Git 资源作为工 ...

  5. JZOJ5966. [NOIP2018TGD2T3] 保卫王国 (动态DP做法)

    题目大意 这还不是人尽皆知? 有一棵树, 每个节点放军队的代价是\(a_i\), 一条边连接的两个点至少有一个要放军队, 还有\(q\)次询问, 每次规定其中的两个一定需要/不可放置军队, 问这样修改 ...

  6. Java 获取客户端浏览器中的语言设置

    获取客户端的首选语言 javax.servlet.ServletRequest.getLocale() 根据Accept-Language请求头返回客户端的首选语言.如果客户端请求没有Accept-L ...

  7. shell 之 循环执行某操作

    需求: 按月执行201904到202010的py脚本. 代码如下: #!/bin/bash i=201904 # 定义开始月份 while [ $i -le 202010 ] # 当i小于等于2020 ...

  8. oracle 之 EXP、IMP 使用简介

    注:DOS命令行中执行exp.imp 导出导入ORACLE数据,ORACLE操作者具有相应的权限! 1.1.导出整库或当前用户:关键字:full语法:exp 用户/密码@数据库实例名 file=导出文 ...

  9. centos7 RPM命令使用

    rpm -qa 软件名称 ---查看软件是否安装成功 rpm -ql  软件名称 ---查看软件中都有什么 rpm -qf  文件名称(绝对路径) ---查看属于哪个软件 rpm -ivh 包     ...

  10. vue render中如何正确配置img的路径

    第一种:适用于静态路径 attrs: { src: require('../common/images/logo.png'), title: 'img' } 第二种:适用于动态路径 domProps: ...