25、Windows下安装Nginx 项目发布

Windows下安装Nginx

前言
Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站　点（俄文：Рамблер）开发的

它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。
它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。
安装步骤
1、下载Nginx

下载地址：http://nginx.org/en/download.html （Nginx官网）

这里注意：路径下不能有中文否则打不开

2、下载之后，解压到指定的目录，就可以看到以下的目录
在文件里使用 cmd 进如终端里面操作打开即可 ✌

3、控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号。

4、nginx命令介绍
（1）start nginx 开启nginx服务
（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息
（3）nginx.exe -s quit 关闭nginx服务，完整有序的停止nginx，并保存相关信息
(4) nginx.exe -s reload
重载nginx服务，当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx

当你操作任何的问题就尝试使用强制关闭执行的代码然后重新启动

(5) 使用 taskkill /F /IM nginx.exe > nul命令强关nginx服务器

然后访问自己的项目

浏览器访问：localhost/dist/index.html就可以看到页面了。

——————————————————————-————————

多个Vue项目如何部署到服务器
一、vue打包
在项目中输入npm run build

此时会生产一个dist目录

二、将dist目录上传至ngnix中的html目录中
修改Nginx文件，找到nginx.conf

三、如果此时有多个vue项目呢？
多加几个location即可

四、最后记得保存
:wq

五、重新启动Nginx
sudo nginx -s reload

六：Nginx.conf的内容

location / { root html/dist/; try_files $uri $uri/ /dist/index.html;
index index.html;
}
这里：复

server {
    
    
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
     ///注意 这里 有可能 需要 修改   ************
        location / {
    
    
            root   html/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
       location @router {
    
    
        #          #因此需要rewrite到index.html中，然后交给路由再处理请求资源
                  rewrite ^.*$ /index.html last;
        }
 

        location /admin {
    
    
            alias  /usr/local/nginx/admin/dist;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
 
                #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的
       location @router {
    
    
      #          #因此需要rewrite到index.html中，然后交给路由再处理请求资源
            try_files $uri $uri/ @router;
            index index.html;
        }
 
                #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体>的文件
       location @router {
    
    
      #          #因此需要rewrite到index.html中，然后交给路由再处理请求资源
             rewrite ^.*$ /index.html last;
        }

终端运行：

sudo nginx -s  reload  // 修改配置后重新加载生效9·

sudo nginx -s stop  // 快速停止nginx

————————————————
当 hash 模式下注意：直接将项目放到 html 文件
在这里插入图片描述

打包后生成的dist 文件
在这里插入图片描述

然后重新启动一下在项目的根目录下
使用 cmd 进入并启动然后在
也没面使用 localhost/dist 访问
项目会在路径上显示 # 号键
也代表是 hash 模式**

二、history模式

注意：打包的不一样访问和配置也就不一样
dist 文件包也需要更换

首先需要在

在这里插入图片描述

在这里插入图片描述
文件在编译器里面打开并且修改一下代码片段

2.然后重新启动一下

**注意：**如果页面打不开是空白的话有可能是缓存的问题重新的启一下然后
打开后会和 hash 模式有明显的区别比如路径上没有 # 号
如下图所示：路径是这样的
在这里插入图片描述

————————————————————————————————

哈哈哈 两种打包方式
1，如果路由是hash状态
首先打开项目文件夹。找到config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“ / ”，改为“ ./ ”。

如图
在这里插入图片描述
然后进行打包

npm run build

如果的到如下提示，不会报任何异常或错误，
在这里插入图片描述

如果想本地打开需要一个本地服务器，可以使用Hbuilder，或者安装本地服务。

首先确保是全局安装。

npm install http-server -g

根据目录 cd 。

cd dist

在这里插入图片描述
输入启动命令。

http-server

在这里插入图片描述

浏览器输入对应的链接。

http://127.0.0.1:8080 例子:

备注：如果没有cd dist，直接在根目录启动服务的话浏览器需要输入

http://127.0.0.1:8080/dist/index.html

2，如果路由是 mode:‘history’模式
使用此模式不需要在config文件夹里的index.js文件中的修改build对象，assetsPublicPath中的“ / ”不变，也就是什么也不要改动，直接打包。
此模式需要后端配合，详情请看官网文档，或者使用node进行配置app.js自己的服务。
代码如下：

const http = require('http')
const fs = require('fs')
let server = http.createServer();

server.on('request', (req,res)=>{
    
    
	
	if(req.url.startsWith('/static')){
    
    
	
		fs.readFile('.' + req.url, (err,data) => {
    
    
			res.end(data);
		})
	} else {
    
    
		
		fs.readFile('./index.html', (err,data) => {
    
    
			res.end(data);
		})
	}
})

server.listen(8888);
console.log('Server running at http://127.0.0.1:8888/');

如图把app.js放在dist文件下

在这里插入图片描述
然后使用node命令启动服务

node app.js

————————————————
over ~~

25、Windows下安装Nginx 项目 发布

猜你喜欢

25、Windows下安装Nginx 项目发布