uni-app H5打包指定模板文件时会丢失样式或js

uni-app H5打包指定模板文件时会丢失样式或js

示例代码：

随便建个uni空白项目 指定模板为index.html后 重新编译就可以重新这个错误

操作步骤：

随便建个uni空白项目 指定模板为index.html后 重新编译就可以重新这个错误

预期结果：

页面样式正常 控制台不报错

实际结果：

样式错乱 控制台报错

bug描述：

编译运行h5时不指定manifest.json中 h5的配置时打包后的文件正常， 一旦指定了模板 template 或者其他参数编译时候页面就会不正常 出现css丢失页面样式错乱 浏览器出现报错 main.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.


更多关于uni-app H5打包指定模板文件时会丢失样式或js的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

像微信H5企微H5应用需要全局引入jssdk时候遇到就很难搞，临时解决办法是打包完成后去index.html文件手动添加后再上传服务器。

更多关于uni-app H5打包指定模板文件时会丢失样式或js的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是不是没按文档建立模版？hello uni-app 示例存在这样的问题吗？

就是使用的hello uni-app 模板指定的项目根目录下的index.html

回复 哈库拉玛塔塔: 直接运行hello uni-app是否正常？vue2还是vue3？

回复 DCloud_UNI_GSQ: 不正常 vue2 manifest.json指定h5配置就异常 删掉就正常

回复 哈库拉玛塔塔: 创建的hello uni-app项目默认就是vue2，默认也指定了模板，测试正常，你是不是将vue2和vue3的模版搞混了。

这个问题还没解决吗，指定了template地址就样式全乱了，导致我无法在index.html页面增加东西

解决方案为重新新建一个项目，把新项目的页面模板拷贝过来，实际上就是一个页面路径错乱的问题，大概率是因为设置了baseURl导致的

在 uni-app 中，打包 H5 时如果指定了自定义模板文件（如 index.html），可能会出现样式或 JS 文件丢失的问题。这通常是由于模板文件配置不正确或打包过程中资源路径处理不当导致的。以下是一些可能的原因和解决方案：

1. 检查模板文件路径

确保在 vue.config.js 或 manifest.json 中正确指定了模板文件的路径。例如：

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].template = './public/index.html'; // 指定模板文件路径
      return args;
    });
  },
};

2. 确保模板文件包含必要的占位符

uni-app 在打包时会向模板文件中注入一些必要的资源（如 CSS 和 JS 文件）。如果模板文件中缺少这些占位符，可能会导致资源丢失。确保模板文件中包含以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <!-- 注入 CSS 文件的占位符 -->
  <%= htmlWebpackPlugin.options.css %>
</head>
<body>
  <div id="app"></div>
  <!-- 注入 JS 文件的占位符 -->
  <%= htmlWebpackPlugin.options.js %>
</body>
</html>

3. 检查资源路径

如果打包后资源路径不正确，可能会导致样式或 JS 文件无法加载。可以通过以下方式解决：

  • 相对路径问题：确保模板文件中的资源路径是相对路径，或者使用 publicPath 配置。
  • 配置 publicPath：在 vue.config.js 中设置 publicPath，确保资源路径正确：
// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
};

4. 检查打包后的文件

打包完成后，检查 dist 目录下的文件，确认 CSS 和 JS 文件是否生成，以及路径是否正确。如果文件缺失，可能是打包配置有问题。

5. 清理缓存

有时缓存可能导致打包结果异常。可以尝试清理缓存后重新打包：

# 清理缓存
rm -rf node_modules/.cache
# 重新安装依赖
npm install
# 重新打包
npm run build

6. 检查 uni-app 版本

确保使用的 uni-app 版本是最新的，旧版本可能存在一些已知问题。可以通过以下命令更新 uni-app：

npm update @dcloudio/uni-app

7. 调试打包配置

如果问题仍然存在，可以逐步调试打包配置，检查是否有其他配置影响了资源注入。例如，检查 vue.config.js 中的其他配置项，或者使用 --verbose 参数查看详细的打包日志：

npm run build -- --verbose
回到顶部