vue项目上线到服务器中用nginx ，有的电脑或手机可以正常显示页面，有的电脑手机显示是空白页可以显示项目的名称；

1、我显示正常的电脑上换个网络就报错显示说 VM338:161 crbug/1173575, non-JS module files deprecated；
2、我用显示空白的手机只显示项目名称的，换成可以正常显示的网络，就能显示正常

感觉是网络的问题，到底要怎么解决？

vue 默认浏览器手机系统版本问题，要在配置文件中修改允许使用的版本范围

不知道你这个问题是否已经解决, 如果还没有解决的话:

这篇博客: Vue.js分环境打包到部署-并用nginx代理请求后端接口中的 3.但是我们仔细测试发现还有个问题，就是我们刷新页面后发现会出现404找不到资源 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
造成这样的原因是，Vue项目是一个单页应用，vue-router 是根据网址的不同动态的用js渲染页面，比如我们在项目中这样一个目录下刷新 [localhost:3000/test] 其实在我们正真的资源目录下并不存在这样一个目录，这也就是导致刷新后404的原因
因此需要rewrite到index.html中，然后交给路由在处理请求资源
具体配置如下（在上面的配置中添加）
```
server {
		listen		9090;
		root        D:/source/dist;
		location / {
            try_files $uri $uri/ @router;
			index index.html;
        }
		location @router {
			rewrite ^.*$ /index.html last;
		}
        location /images/ {
         proxy_pass   http://10.5.0.143/images/;
        }
        location = /login.htm {
            proxy_pass   http://10.5.6.54:8080/login.htm;
        }
        location ^~ /api/ {
            proxy_pass   http://10.5.6.54:8080; 
        }
	}
```
这样我们就解决了刷新404的问题，nginx 还有很多配置，允许跨域等等，本人也是近期接触这个，代码虽然不多但挺实用的。
以下回答来自chatgpt:
针对该问题，可能存在以下几个方面的解决方法：
1. 网络原因导致页面不一致：可以考虑使用CDN来加速静态文件的传输，或者使用最新的HTTP/3协议等方式来提升网络传输效率。
2. 不同设备出现不同的错误提示：VM338:161 crbug/1173575, non-JS module files deprecated。可以考虑升级浏览器版本或者检查代码中是否存在使用了已经过时的模块导入方式。
3. Vue项目上线后出现页面不一致的问题：可以考虑使用全局变量来移植不同环境下的配置，避免因为环境差异导致的问题。具体可以按照以下步骤进行操作：
4. 在项目的根目录中新建.env.xxx文件（xxx为环境名称），如.env.development、.env.production等。
5. 在.env.xxx文件中定义全局变量，如配置接口地址等，以VUE_APP_为前缀，如VUE_APP_API_URL=http://localhost:3000。
6. 在Vue代码中通过import引入.env.xxx文件，并使用process.env.VUE_APP_变量名称来获取配置信息，如let apiUrl = process.env.VUE_APP_API_URL。
7. 在使用VueCLI构建项目时，会根据环境名称自动加载对应的.env.xxx文件，从而实现环境无缝转换。
8. 解决父子路由中的路由拦截问题：在路由配置中设置meta字段，用于标识哪些路由需要进行用户登录验证，然后使用router.beforeEach方法进行拦截，如下：
```
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    let token = sessionStorage.getItem('token');
    if (token) {
      next();
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    }
  } else {
    next();
  }
});
```
1. 使用闭包解决Vue组件数据修改问题：在Vue组件中定义需要修改的方法，然后通过在JS代码中调用该方法来实现数据修改，如下：
```
<template>
  <div class="about" id="about">
    {{text}}
  </div>
</template>
<script>
import Test from './test'
export default {
  name: 'About',
  data () {
    return {
      text: 'gg'
    }
  },
  mounted () {
    const test = new Test(
      {
        hooks: {
          input: value => this.text = value
        }
      }
    )
  }
}
</script>

// Test类中定义方法
export default class Test {
  constructor(props = {}) {
    this.options = Object.assign({
      mode: 'write'
    }, props)
      this.create()
    }
    create() {
      let about = document.getElementById('about')
      let div = document.createElement('div')
      div.innerHTML = '<input type="text" id="inputText">'
      about.appendChild(div)
      let input = document.getElementById('inputText')
      input.addEventListener('input', () => {
          this.options.hooks.input(input.value)
      })
    }
}
```

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

这里说的网络是指用的无限网络还是移动流量，无线网络的话，可以将手机和服务器放到一个网里面。移动流量就可以试着找运营商解决。