Linux环境部署vue项目 + nginx访问（包含nginx配置简介）

1、本地打包、上传

# 打包命令不同项目有略微差别，核心命令
npm run build# 我们项目前端给配了测试、生产环境，测试环境打包命令是
npm run build:stage# 建议先看一下项目的README文件

打包之后，得到一个文件夹，一般叫dist、也有其他名字的

提前再linux上、合适的位置建好放代码的文件夹，将dist中的内容传过去

2、配置nginx

我以自己遇到的情况为例说明，如果你的linux服务器还没有装nginx，那就先装一下。

1）找到nginx位置

# 先用命令找nginx进程pid
ps -aux | grep redis# 再用命令找位置
ll /proc/[写pid]/cwd

2）在nginx下的conf中，找到nginx配置文件nginx.conf

在文件中编辑 http{} 块 中的 server{} 块
新增（或者编辑已经不用的）server，主要是以下几个地方：

# server{}中的listen
listen ：代理端口# location{}中的root和index
root ：资源根目录
index ：默认索引页面

附上配置文件示例，大家可以参照

server {listen       9001;server_name  192.168.191.52;location / {root   /webserver/nuohua2023/ui/admin;try_files $uri $uri/ /index.html $uri/ =404;index  index.html index.htm;add_header X-Content-Type-Options  'nosniff';#禁止嗅探文件类型add_header Content-Security-Policy "script-src 'self' 'unsafe-eval' 'unsafe-inline' oyxdwx.com:9443 *.aliyun.com unpkg.com g.alicdn.com *.alibaba.com *.aliapp.org *.csslcloud.net *.qq.com *.bokecc.com";#只允许同源下的jsadd_header X-XSS-Protection "1; mode=block";#开启XSS过滤器}}

3）重启nginx

重启可以直接用nginx重启命令，也可以先停nginx服务、再启动

# 方法一：直接用重启命令；进入nginx安装目录执行
./sbin/nginx -s reload# 方法二：先停nginx服务，再启动
# 停止：进入nginx安装目录执行
./sbin/nginx -s stop# 启动：进入nginx安装目录执行
./sbin/nginx -c ./conf/nginx.conf

查看nginx配置是否成功

./nginx -t

回显test is successful说明配置正确

4）访问
以我上面对admin的配置为例，访问地址应该是

http://192.168.191.52:9001/login?redirect=%2Findex

其中“/login?redirect=%2Findex”是项目访问登录页的路径，由前端代码控制；
http://192.168.191.52:9001由nginx配置控制