前端开发——记录开发出现的问题

1. 超链接，访问服务器图片

超链接构成 = http:// + 服务器ip + 图片地址 例如（http://192.0.2.1/image.jpg）

注意：如果访问不到图片，那么需要考虑跨网、防火墙、图片路径

2. 请求成功，但是返回Failed to load response data

发生这种情况，大概率就是跨域了

如果希望允许所有域访问，可以使用通配符： Access-Control-Allow-Origin: *

例如，在 Vue CLI 生成的项目中，你可以在 vue.config.js 文件中配置代理：

module.exports = {  
  devServer: {  
    proxy: {  
      '/api': {  
        target: 'http://example.com', // 目标服务器地址  
        changeOrigin: true, // 开启代理  
        pathRewrite: {  
          '^/api': '' // 路径重写，移除路径中的/api  
        }  
      }  
    }  
  }  
}

原理： changeOrigin: true，相当于在本地创建一个虚拟服务器，然后发送请求的数据，会同时会收到请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

3. 使用require（）导入资源文件

当你在 JavaScript 中引用一个图片或者其他类型的文件，并且没有使用 require() 或其他模块导入方法，这个文件通常不会被 Webpack 打包进你的构建输出中。这是因为 Webpack 默认只处理 JavaScript 模块，而图片、CSS 等其他类型的文件需要通过配置特定的加载器（loader）来处理。

例如，对于图片文件，你需要配置 file-loader 或 url-loader。这些加载器告诉 Webpack 如何处理遇到的文件，并将它们转换为模块，这样你就可以在 JavaScript 中导入它们。

当你尝试在不使用 require() 或其他导入方法的情况下直接在 HTML 或 JavaScript 中引用图片时，浏览器会尝试从服务器加载这个图片，但因为这个图片没有被 Webpack 打包进构建输出，所以服务器找不到它，从而返回 404 错误。

所以如果你的图片资源是本地路径，那么就一定要使用require（）导入，如果是超链接，那么可以不使用require（）导入，因为浏览器访问时服务时，服务会根据超链接去网上找图片资源，而不是在打包里面找图片资源。

4. We’re sorry but panorama-ui doesn’t work properly without JavaScript enabled.

因为这个问题太广泛了，不可能给出具体的解决办法，只能提供解决方向。

解释一下就是无法运行JavaScript，主要有以下两种可能

• 浏览器问题：JavaScript被浏览器禁用、浏览器版本太老而不认识JS新特性
• 代码问题：JavaScript本身报错了，例如资源路径不对，常常发生在Nginx代理的问题上

5. Vue打包会忽略vue.config.js文件

本地项目运行正常，打包部署到服务器运行就会出错，这往往是因为vue打包时，不会把vue.config.js一起打包。

示例：下面通过 "/file/panorama/{{name}}.JPG"访问图片

• 本地访问： 由于web.config.js配置了代理，所以最后的资源访问路径为：“http://192.168.1.123:8088/file/panorama/{{name}}.JPG”
• 服务器访问： 由于Vue项目打包会忽略web.config.js，那么通过 "/file/panorama/{{name}}.JPG"访问图片，就不会代理到http://192.168.1.123:8088，而是直接服务器本机的 “/file/panorama/{{name}}.JPG”图片，因此就可能因为图片资源不存在，导致JavaScript报错。