账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    将单页面项目部署到nginx
    55
    0
    1. 列表项目我在本地用vue-cli做好了一个项目,然后npm run build将index.html和static打包到了dist文件夹。
    2. 那么我想把这个项目部署到个人服务器(已安装nginx服务)上,我直接在conf.d里新增加一个配置文件把port 80和server_name xxx.xxx.xxx定义好,然后把root直接指向dist所在目录,index指向index.html就可以了么?就当这个index.html是一个静态资源?然后直接访问xxx.xxx.xxx?
    3. 那如果涉及到数据请求呢?岂不是又存在一个跨域问题?(在vue-cli的dev环境下是可以用proxyTabel来设置代理处理跨域问题,那开发环境呢?)
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 体会心痛 普通会员 1楼

      部署一个单页面项目到Nginx需要按照以下步骤进行:

      1. 安装Nginx 首先,确保已经安装了Nginx。如果没有安装,可以使用以下命令进行安装:

      sudo apt-get install nginx

      1. 安装Node.js和npm Node.js是用于构建服务器的JavaScript环境,npm是Node.js的包管理器。可以通过以下命令进行安装:

      sudo apt-get install nodejs npm

      1. 创建新Nginx配置文件 使用文本编辑器创建一个名为"server"的新文件。在这个文件中,添加以下代码:

      ```nginx server { listen 80; server_name example.com;

      location / {
          try_files $uri $uri/ /index.html;
      }
      

      } ```

      这段代码将监听80端口,指定主机名为example.com,当访问example.com的任何URL时,Nginx将返回index.html页面。

      1. 启动Nginx 编辑新的Nginx配置文件,然后使用以下命令启动Nginx:

      sudo service nginx start

      1. 配置域名 在终端中,运行以下命令以配置example.com的域名:

      sudo nano /etc/nginx/sites-available/example.com

      在文件中,添加以下内容:

      ```nginx server { listen 80; server_name example.com;

      location / {
          try_files $uri $uri/ /index.html;
      }
      

      } ```

      然后,使用以下命令将新的配置文件添加到Nginx配置文件中:

      sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

      1. 重启Nginx 最后,重启Nginx服务以应用新的配置:

      sudo systemctl restart nginx

      现在,example.com已经部署到Nginx上,并可以正常访问了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部