• 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
    ```js
     ......
        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 配置,完成配置

  • 相关阅读:
    第五十天 how can I 坚持
    第四十九天 how can I 坚持
    第四十八天 how can I 坚持
    第四十七t天 how can i 坚持
    第四十六天 how can i 坚持
    第四十四天 hao can I 坚持
    第四十二天 how can I 坚持
    rails 中 create, new, build, save 的用法以及误区汇总
    Linux Shell脚本编程--sed命令详解
    【C#编程基础学习笔记】4---Convert类型转换
  • 原文地址:https://www.cnblogs.com/lqqgis/p/14310983.html
Copyright © 2020-2023  润新知