部属vue项目,访问路径设置非根,显示白屏的解决方案

目录
  • vue访问路径设置非根显示白屏
    • 解决
  • vue部署到非根目录设置
    • 需要修改三处配置

vue访问路径设置非根显示白屏

问题：

访问页面，返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”

环境：

使用nginx部属vue项目时，没有把访问项目设置为根路径

说明：

当访问项目对应的nginx配置没有给项目的访问路径设置为根时，页面显示白屏，在network中可以看到所有资源都加载完成，

index.html会显示

“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”信息；

如果将项目的nginx配置访问路径设置成根路径，网站页面可以正常访问，但是请求的返回还是会有这样的信息，这段信息就写在了index.html页面中；

分析原因是vue项目中会有对访问路径的判断，如果不是根路径，就不执行js代码，进而显示白屏。

解决

vue项目，访问路径不是根目录，依照以下几个步骤进行设置，就可以正常访问

1.修改vue.config.js，设置pbulicPath路径

2.设置路由中的base信息

3.修改nginx，在serve中设置location /webroot

vue部署到非根目录设置

假设部署到根目录下app文件夹里

需要修改三处配置

1.config => index.js

   // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/app/", //修改打包后路径  修改这里

把 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",

2.router => index.js

const router = new Router({
  mode: "history",
  // base: getAbsolutePath(),
  base: "/app/",
  routes: [...]
......

增加基础路径 base:"/app/"

3.网站根目录文件夹下修改配置文件，用的是IIS

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="zkpt.asmx" />
                <add value="index.html" />
                <add value="Default.htm" />
                <add value="Default.asp" />
                <add value="index.htm" />
                <add value="iisstart.htm" />
                <add value="default.aspx" />
            </files>
        </defaultDocument>
        <!-- 刷新白屏增加配置start -->
 <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/app/" />
        </rule>
      </rules>
    </rewrite>
    </system.webServer>
    <!-- 刷新白屏增加配置end -->
</configuration>

修改

<action type="Rewrite" url="/" />

为

<action type="Rewrite" url="/app/" />

这样就可以了，亲测没有问题。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解Vue项目编译后部署在非网站根目录的解决方案

    同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名根目录来访问,而外网却指向了一个子目录. eg. : vue-router: history模式 内网环境:192.168.1.1:8080/index.html 外网环境:domain.com/ttsd/index.html 由于开发出来的项目是要部署在客户方,且客户并不想单独拿一个域名(或子域)来部署,这时,打包后的程序就要作一些配置方面的修改了. 修改配置文件 1.把打包后的资源引用修改为相对路径 找到 config/index

  • vue-router启用history模式下的开发及非根目录部署方法

     为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 为了达到这一目的,浏览器当前提供了以下两种支持: 1.hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello.它

  • 部属vue项目,访问路径设置非根,显示白屏的解决方案

    部属vue项目,访问路径设置非根,显示白屏的解决方案

    目录 vue访问路径设置非根显示白屏 解决 vue部署到非根目录设置 需要修改三处配置 vue访问路径设置非根显示白屏 问题: 访问页面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.” 环境: 使用nginx部属vue项目时,没有把访问项目设置为根路径 说明: 当访问项目对应的nginx配置没有给项目的访问路径设置为根时,页面显示白屏,在

  • SpringBoot配置项目访问路径URL的根路径方式

    目录 配置项目访问路径URL的根路径 1.SpringBoot在2.0之前版本 2.SpringBoot在2.0之后版本 设置默认访问路径 1.继承WebMvcConfigurerAdapter类或实现WebMvcConfigurer接口 2.@Controller路由设置 配置项目访问路径URL的根路径 1.SpringBoot在2.0之前版本 使用server.context-path server.context-path=/api 2.SpringBoot在2.0之后版本 使用serve

  • 浅谈vue项目,访问路径#号的问题

    刚入手vue,有好多的疑问,目前遇到的是vue项目启动之后,输入http://ip:port,我发现浏览器里面显示的地址栏竟然是http://ip:port/#/,这个"/#/"不知道是什么东西,于是百度查了一下. 原因:对于vue开发的单页面应用,我们在切换不同的页面的时候,可以发现html永远只有一个,这也正是称之为单页面的原因.而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载.因为对于正常的页面

  • 浅谈VUE项目打包后运行页面一片白问题

    目录 1.说明 2.问题说明 3.解决 3.1.index.js 3.2.utils.js 3.3.webpack.prod.conf.js 4.总结 1.说明 我们用VUE搭建一个脚手架后,在IDEA等工具中开发时,启动都没有什么问题,但是项目开发完成之后,可能需要部署上线,所以需要进行打包操作了,一般都是用下面命令进行打包: npm run build 打包过程一般没有什么问题,然后就会在工程目录下生成一个[dist]文件夹,里面就是我们打包好的文件,把这些文件部署到Nginx中或者Tomc

  • Vue项目部署在Spring Boot出现页面空白问题的解决方案

    网上流行的解决方案是将assetsPublicPath: '/'改成'./',下面说一下这个解决方案的弊端: 通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path,上下文改变了css, js等文件的访问路径,文件无法加载导致index.html显示空白.'/'改成'./'是将绝对路径变为相对路径,可以动态适应Spring Boot端上下文的改变,这是为什么这个解决方案起作用的原因. Vue项目部署在Spring Boot出现的另一

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • vue项目在安卓低版本机显示空白的原因分析(两种)

    vue项目在安卓低版本机显示空白原因: 可能的原因一 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网上找到方法如下: https://www.jb51.net/article/146840.htm 1.安装babel-polyfill和es6-promise npm i babel-polyfill --save npm i es6-promise --save 2.main.js引入  impor

  • vue跨域处理方式(vue项目中baseUrl设置问题)

    vue跨域处理方式(vue项目中baseUrl设置问题)

    目录 vue跨域处理(baseUrl设置问题) 一.方法一 二.方法二 三.方法三 vue请求不同的域名,baseURL配置 vue跨域处理(baseUrl设置问题) 一.方法一 在公用文件common.js中设置baseUrl export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api' 该方法的优点:在项目打包时,static下面的文件是不会被webpack处理的,所以可以通过改变s

  • nginx部署vue项目,给访问路径加前缀的实现

    目录 Nginx安装与启动 Vue增加访问路径 nginx配置 总结 Nginx安装与启动 去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 start nginx 关闭命令 taskkill /f /t /im nginx.exe 改了配置文件,不需要先关闭再启动,直接重启,重启命令 nginx -s reload Vue增加访问路径 有时候会根据需要,区分不用的v

随机推荐