【Vue+NUXT+SpringCloud】项目部署服务器后的排错指南

部署 Web 项目的常见问题：故障排除指南

部署 Web 项目时，可能会遇到各种问题。本文将提供一个故障排除指南，涵盖以下常见问题：

一、index.html 页面 BASE_URL 找不到

错误表现

• 项目部署到服务器后，访问 index.html 页面，出现 BASE_URL 找不到的报错。

解决方法

• 重新执行打包命令，会生成 dist 目录，打开 index.html 发现又报错了。

二、按钮变成小框框

错误表现

• 部署到服务器后，发现按钮都变成这种小框框。

解决方法

• F12 打开网络，发现 .woff 这个图标没有找到。
• 在 vue.config.js 文件中，将以下配置改成 false：

module.exports = {
  ...
  css: {
    extract: false
  },
  ...
}

三、.woff 图标没有找到

错误表现

• F12 打开网络，发现 .woff 这个图标没有找到。

解决方法

• 在 vue.config.js 文件中，将以下配置改成 false：

module.exports = {
  ...
  css: {
    extract: false
  },
  ...
}

四、打包好的 dist 目录上传到服务器

错误表现

• 使用 xftp 远程工具将打包好的 dist 目录上传到服务器上，但不知道如何进行操作。

解决方法

• 打开 xftp，输入服务器地址、用户名和密码，登录服务器。
• 在本地找到打包好的 dist 目录，将其拖拽到服务器上的目标目录。

五、修改 /config/index.js 中的 assetsPublicPath 路径

错误表现

• 在 /config/index.js 文件中，找不到 assetsPublicPath 路径，不知道如何进行修改。

解决方法

• 在 /config/index.js 文件中，找到以下配置：

module.exports = {
  ...
  assetsPublicPath: 'dist/',
  ...
}

• 将 assetsPublicPath 修改为服务器上的目标目录，例如：

module.exports = {
  ...
  assetsPublicPath: '/var/www/html/my-project/dist/',
  ...
}

六、项目结构报错

错误表现

• 在部署项目时，遇到项目结构报错，不知道如何解决。

解决方法

• 检查项目的目录结构是否正确，确保项目中包含必要的文件夹和文件。
• 检查项目的依赖关系是否正确，确保项目中包含了所有必要的依赖包。
• 检查项目的配置文件是否正确，确保项目中的配置文件包含了正确的配置信息。

七、CSS 样式没有生效

错误表现

• 部署项目后，发现 CSS 样式没有生效，页面样式出现问题。

解决方法

• 检查项目的 CSS 文件是否正确地引用到 HTML 文件中。
• 检查项目的 CSS 文件是否正确地编译，确保 CSS 代码没有语法错误。
• 检查项目的浏览器缓存是否已清除，确保浏览器不会加载旧的 CSS 文件。

常见问题解答

1. 部署项目时遇到 404 错误，该怎么办？

答： 检查项目的路由配置是否正确，确保访问的 URL 与路由配置相匹配。

2. 项目部署后无法访问 API 接口，该如何解决？

答： 检查服务器端的 API 接口是否已启动并运行，并且 API 路由是否已正确配置。

3. 项目部署后出现跨域问题，如何解决？

答： 检查服务器端的跨域配置是否已正确设置，可以配置 CORS 头部或使用代理服务器来解决跨域问题。

4. 部署项目后性能较差，如何优化？

答： 可以尝试启用代码拆分、使用 CDN 加速资源加载、优化图像大小和使用缓存技术来提升项目的性能。

5. 如何避免项目部署后出现安全问题？

答： 确保项目使用最新的安全补丁和依赖包，并采用良好的安全实践，例如使用 HTTPS 协议、防止 XSS 和 CSRF 攻击。