vue项目部署到nginx服务


vue开发的项目,通过编译会得到 dist文件夹,如何发布到nginx服务器上?

配置nginx服务器

在nginx服务文件中,打开 conf文件夹,如下

为了不改变nginx的默认配置(nginx.conf),复制一份,重名为 custom.conf,如下

修改 custom.conf 文件中的 root 参数为 custom,如下

 ......
    server {
        listen       80;  // 监听端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   custom; // 项目的静态文件夹
            index  index.html index.htm;
        }
 ......

根据上面修改的 root参数,在nginx服务器的根目录下建立 custom文件夹,如下

通过命令行,按照自己建立的 custom.conf 配置,启动nginx服务器,.\nginx -c .\conf\custom.conf

在 custom文件夹 中建立一个用来测试的 html文件(代码如下),其中JS代码用来测试nginx的反向代理,如下

<body>
    <h1>Welcome to custom!</h1>
    <p><em>Thank you for using nginx.</em></p>
    <script>
        fetch('/ajax/movieOnInfoList?token=&' +
            'optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&' +
            'optimus_risk_level=71&' +
            'optimus_code=10').then(res => res.json()).then(res => {
                console.log(res)
            })
    </script>
</body>

浏览器访问 http://localhost:80,可以看到网页正常访问,但是并没有使用nginx的反向代理获取数据,如下

再次配置 custom.conf 文件,实现反向代理,如下

修改 custom.conf 文件中的 root 参数为 custom
``` javascript
 ......
    server {
        listen       80;  # 监听端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   custom; # 项目的静态文件夹
            index  index.html index.htm;
        }

        # 从nginx走的请求,以 /ajax 开头,代理到https//m.maoyan.com服务器上
        location /ajax/ {  
            proxy_pass  https://m.maoyan.com;
        }
 ......

打开命令行,重启 nginx,相关代码如下,获取https//m.maoyan.com的数据,如下

.\nginx -s stop       停止nginx服务 
.\nginx -s restart    重启nginx服务
.\nginx -s reload     重启加载nginx配置文件(推荐)

发布vue项目

将已经打包的 vue 项目 dist 文件夹里面的内容存放到 custom 文件夹中,重启 nginx 服务器/重新加载 nginx 配置,完成配置


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM