Nginx中部署Angular项目遇到的坑巨坑

网上搜索Angular 项目编译后部署到 Nginx 中的方法，多数文章都介绍了需要在 Nginx 中的配置文件的 location 中特别指定跳转到首页来避免刷新导致404的问题，那么完整的server 代码是：

server {
 listen  80;
 server_name 192.168.190.131;

 #sendfile on;
 #charset koi8-r;
 access_log /var/log/nginx/host.access.log main;

 location / {
  root /chanchaw/app/angular;
  index index.html index.html;
  try_files $uri $uri/ /index.html;
 }

 error_page 404 /index.html;

 location = /index.html {
  root /chanchaw/app/angular;
 }
}

上面的 server_name 后面是 CentOS7.3 的IP地址，后面的 location 中要特别注意：try_files $uri $uri/ /index.html，这里是防止浏览器中刷新导致404，那么重点来了，部署到Nginx 后浏览器测试出现下面的问题：

明明index.html 和 js 文件是在同一个目录下为什么会找不到？chrome 这样，firefox 也这样，好吧，换换IE试试吧。

解决

原来chrome 和 firefox 都会自动将 http 转换为 https 来发出请求，而自己试验用的 CentOS 是安装在虚拟机中的，压根就没想过要部署 ssl ，由于 ie 不会转换协议，所以 ie 上测试是没问题的。

赞 (0)

相关推荐

  • Angular项目从新建、打包到nginx部署全过程记录

    前言 当前,AngularJS作为Javascript的MVC(也有人说是MV*,暂且不纠结这个)框架被广泛使用,它为更快且更容易地开发响应式的Web提供了强大的机制.作为MVC框架,它将Web前端代码分成三个组件Model,View和Controller.因此,在data model,应用逻辑(Controllers)和view展示之间有明确的分离,让你更容易地关注关键的开发区域.view接收来自model的数据来展示.当用户通过点击或者敲击键盘和应用交互时,controller通过改变模型中

  • Nginx中部署Angular项目遇到的坑巨坑

    网上搜索Angular 项目编译后部署到 Nginx 中的方法,多数文章都介绍了需要在 Nginx 中的配置文件的 location 中特别指定跳转到首页来避免刷新导致404的问题,那么完整的server 代码是: server { listen 80; server_name 192.168.190.131; #sendfile on; #charset koi8-r; access_log /var/log/nginx/host.access.log main; location / { r

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • 苹果M1芯片安装nginx 并且部署vue项目步骤详解

    苹果M1芯片安装nginx 并且部署vue项目步骤详解

    brew安装nginx 苹果mac安装使用 brew 安装,如果brew没有安装的话,请到搜索其他地方. 执行命令 第一步当然是更新我们的brew库,可以认为这个玩意就是个软件仓库,类似于安卓市场,苹果appStore brew update 第二步直接查找我们的brew库中有没有nginx这个玩意儿 brew search nginx 如果出现,证明库中已经有了,直接进行安装命令 brew install nginx 安装完 只要没有报错,你的nginx就是已经安装成功了... mac环境下的

  • docker安装nginx并部署前端项目的全过程

    docker安装nginx并部署前端项目的全过程

    目录 1.简介 2.操作 3. 总结 1.简介 本文主要介绍如何使用docker安装nginx,以及如何将前端打包好的vue项目部署到nginx上. 2.操作 (1)拉取nginx镜像: docker pull nginx (2)咱们先把docker镜像跑起来: docker run --name myNginx -p 80:80 -v /home/nginx/dist:/usr/share/nginx/html -d nginx ## --name:容器名字 ## -d: 要启动的镜像的名字

  • 在Tomcat中部署Web项目的操作方法(必看篇)

    在Tomcat中部署Web项目的操作方法(必看篇)

    在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Manager Web应用程序 一:部署解包的webapp目录 将Web项目部署到Tomcat中的方法之一,是部署没有封装到WAR文件中的Web项目.要使用这一方法部署未打包的webapp目录,只要把我们的项目(编译好的发布项目,非开发项目)放到Tomcat的webapps目录下就可以了.如下图所示: 这时,打开Tomcat服务器(确保服务器打开),就可以在浏览器访问我们的项目了,如下

  • 使用Docker部署Angular项目的方法步骤

    Docker 部署 Angular 项目有两种方法,一种是服务端渲染,这个官方文档已有说明,另一种就是使用 node 镜像编译后放入 web 服务器.由于在 node 环境,所以使用 express 最为便捷了. 创建 server.js const express = require('express'); const app = express(); const config = { root: __dirname + '/dist', port: process.env.PORT || 4

  • centos+nginx+uwsgi部署django项目上线

    centos+nginx+uwsgi部署django项目上线

    目录 Python安装 django相关库的安装 nginx安装&配置(处理静态请求和代理动态请求到uwsgi) uwsgi安装&配置 标题关闭setting.py的DEBUG模式 上传完整django项目文件到服务器sftp ftp lrzsz都可以上传文件到服务器,看自己我django项目叫yunwei,主要app是rabc和web,整个项目放/opt/下如下: [root@test-code opt]# ls django_virt nginx redis redis-6.2.6 y

  • 在Nginx上部署ThinkPHP项目教程

    在Nginx上部署ThinkPHP项目教程

    前段时间用Apache配合TP开发了一个小型网站,也算是我使用TP的第一次实战.我习惯使用pathinfo模式,本地运行一切正常,然而部署到服务器上时,由于对方使用的是Nginx,默认是不支持ThinkPHP的pathinfo模式,所以导致路径错误,出现了页面循环跳转的问题,于是就把nginx下载下来在本地亲自测试. 其实,要解决nginx不支持pathinfo的问题,有两个解决思路,一是不使用pathinfo模式,二是修改nginx的配置文件,使它支持pathinfo.为了使问题简单化,我选择

  • docker中部署golang项目的步骤详解

    理解Docker Docker可以帮您为自己的应用程序创建一个单一的可部署"单位".这样的单位也叫做容器,其中包含了应用程序需要的一切.例如代码(或二进制文件).运行时.系统工具,以及系统库文件.将所有这些需要的内容打包为一个单一的单位,可确保无论将应用程序部署在何处,都能提供完全相同的环境.这种技术还可以帮您维持完全一致的开发和生产环境,通常这些环境是很难被追踪的. 一旦搭建完成,容器的创建和部署将可自动进行.这本身就可以避免一系列问题.这些问题中大部分都是因为文件不同步,或开发和生

  • nginx上部署react项目的实例方法

    测试项目:react-demo 克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目) 如果需要,请安装项目环境,比如:node.js,yarn等 进入项目目录,执行npm run build,开始构建项目 构建成功之后,会生成一个dist文件夹(取决于你的项目配置),这个文件夹里的静态文件,就是我们的项目的访问文件了, 配置Nginx,Linux服务器是进入到:/etc/nginx/sites-enabled,然后以管理员身份,新建一个你的react项目的配置文件,比

随机推荐