uni-app SSR自动部署时编译出的js和css路径异常导致404

uni-app SSR自动部署时编译出的js和css路径异常导致404

信息类别 详情
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 macOS 14.5
HBuilderX类型 正式
HBuilderX版本号 4.36
浏览器平台 Chrome
浏览器版本 131.0.6778.86
项目创建方式 HBuilderX

操作步骤：

按文档（https://uniapp.dcloud.net.cn/tutorial/ssr.html#distribute）配置：

  1. 给云函数绑定域名A，并给ssr云函数设置路径为"/index"
  2. 给静态托管绑定域名B
  3. 本地新建vite.config.js，并设置base为"https://域名B/index"
  4. manifest.json中给“运行的基础路径”设置为"/index/"
  5. 进行构建，并勾选以“SSR方式发行”和“将编译后的资源部署到前端网页托管”
  6. 构建完后查看index.html，其中的css和js路径为"https://域名B/assets/xxx.js"，路径中没有设置的"idnex"
  7. 加载网页，js和css都会404

PS: 环境是阿里云，已经尝试了个各种配置格式还是不行，貌似同时勾选SSR和部署前端就不会读取配置的path。其他人也同样遇到过：https://ask.dcloud.net.cn/question/187128?item_id=288910&rf=false

预期结果：

index.html中的路径：

<script type="module" crossorigin src="https://域名B/index/assets/index-E8LOIzz-.js"></script>
<link rel="stylesheet" crossorigin href="https://域名B/index/assets/index--97Oz_rB.css">

实际结果：

index.html中的路径：

<script type="module" crossorigin src="https://域名B/assets/index-E8LOIzz-.js"></script>
<link rel="stylesheet" crossorigin href="https://域名B/assets/index--97Oz_rB.css">

bug描述：

按文档（https://uniapp.dcloud.net.cn/tutorial/ssr.html#distribute）配置后，使用自动部署静态托管，编译出的js和css路径不包含path导致加载会404


更多关于uni-app SSR自动部署时编译出的js和css路径异常导致404的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app SSR自动部署时编译出的js和css路径异常导致404的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app SSR（服务器端渲染）自动部署时，如果遇到编译出的JS和CSS路径异常导致404错误，通常这是由于资源路径配置不正确或者服务器配置不当引起的。以下是一个可能的解决方案，通过配置webpack来修正资源路径，并确保服务器能够正确提供这些资源。

步骤一：修改webpack配置

首先，确保你的SSR项目中有一个自定义的webpack配置文件（通常是vue.config.js或者webpack.config.js），用于调整资源路径的生成方式。

// vue.config.js 或 webpack.config.js
module.exports = {
  configureWebpack: {
    output: {
      // 确保公共路径正确，这里假设部署在根目录
      publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
    },
    // 如果使用了html-webpack-plugin，确保模板正确
    plugins: [
      new HtmlWebpackPlugin({
        template: 'path/to/your/template.html',
        // 可以通过templateParameters调整路径
        templateParameters: {
          PUBLIC_PATH: process.env.NODE_ENV === 'production' ? '/' : '/'
        }
      })
    ]
  },
  chainWebpack: config => {
    // 进一步调整路径配置，如需要
    config.plugin('extract-css').tap(args => {
      args[0].filename = 'css/[name].[contenthash:8].css';
      args[0].chunkFilename = 'css/[name].[contenthash:8].css';
      return args;
    });
  }
};

步骤二：检查服务器配置

确保你的服务器配置能够正确解析并服务这些静态资源。以Nginx为例，你可以在你的Nginx配置文件中添加如下配置：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;  # SSR服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        root /path/to/your/static/files;  # 静态文件目录
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

步骤三：构建并部署

  1. 运行构建命令，确保资源被正确编译和放置：
npm run build

  1. 部署你的SSR应用及静态资源到服务器。

  2. 检查部署后的应用，确保JS和CSS文件能够被正确加载。

通过上述步骤，你应该能够解决uni-app SSR自动部署时编译出的JS和CSS路径异常导致的404问题。如果问题依旧存在，建议检查网络请求的详细路径，以及服务器日志以获取更多信息。

回到顶部