关于ruyi生产正常，开发异常的问题记录

问题描述

因公司需要，使用的环境是ruyi的前端部分，采用vue2+element-ui

1.当以开发环境进入页面时，第一次正常，在刷新后会白屏，或者卡在加载页面，控制台抛出错误 2.关于样式异常问题

Uncaught SyntaxError: Unexpected token '<'

但进入生产环境访问，一切正常，刷新后也依然正常。

原因

问题就出在Uncaught SyntaxError上，这是js的语法错误。例如

const 

上面代码会抛出

const 
      

SyntaxError: Unexpected end of input

当点击抛出部分进入具体错误地方，会进入html页面，错误就出在这。

graph TD
浏览器请求获取html页面 --> 浏览器解析html -->解析script与link标签

问题就出在解析解析script与link标签上

总所周知道script的标签使用

<script src="xxxx">

这时候浏览器发请求拿取到js问题，但如果拿取到的并非js文件，那自然会有SyntaxError错，本人就遇到这种情况。生产正常的原因在于ng配置对了，开发环境配置错了。因为开发环境也有类似于 try_files $uri$uri/ /xxx/index.html;的配置逻辑，既无论请求什么如果请求不到了就返回/xxx/index.html 但js文件和css文件是实际存在的，是请求的到的，理论上是不应该返回html

本人具体前端错误配置了啥忘了，因为vue-cli在配置文件中需要重启才生效，

export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  base: '/yyy', // 当路由配置base 到时候进入http://xxx:xx/yyy才会展示页面。http://xxx:xx会空白
  
  
  
  对应的vite/vue-cli都得配置
  publicPath: process.env.NODE_ENV === "production" ? "/yyy/" : "/",
  既生产环境需要添加nbbz 开发环境不需要添加，如果生产不编写/yyy/会导致生产上有问题
})

关于样式问题

在ruyi样式问题当中/srccomponents/ThemePicker 这个文件当中的有个setTheme函数，当中的

   if (!this.chalk) {
        const url = `${process.env.VUE_APP_BASE_URL}/styles/theme-chalk/index.css`
        await this.getCSSString(url, 'chalk')
      }

生产
VUE_APP_BASE_URL = '/yyy'
开发
VUE_APP_BASE_URL = 'http://localhost:8090'

styles/theme-chalk/index.css这是手动请求，不是浏览器请求的css。文件文件在public/styles下面 当以上路由在生产当中配置了base 请求头前面也需要带上，否则会报404

而开发环境需要带http://localhost:服务端口 。因为开发的时候没有自动携带前面的ip