uni-app怎么做才能让hbuilder运行H5时生成的index.html中对static资源引用采用相对路径

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app怎么做才能让hbuilder运行H5时生成的index.html中对static资源引用采用相对路径 我在HBuilderX中用uni-app默认模板创建了一个项目，开发运行在企业微信环境中的H5站点。为了便于调试微信JSSDK相关功能，我需要在本地调试时使用带域名的地址来访问，现发现问题如下：

直接通过HBuilderX运行是生成的首页index.html如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>生产运营2.0</title>
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="/static/index.2da1efab.css">
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<script src="/static/js/chunk-vendors.bd1ef1be.js"></script>
<script src="/static/js/index.78d3480f.js"></script>
</body>
</html>

打包发布后的首页index.html如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>生产运营2.0</title>
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="./static/index.2da1efab.css">
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<script src="./static/js/chunk-vendors.bd1ef1be.js"></script>
<script src="./static/js/index.78d3480f.js"></script>
</body>
</html>

两者的差异主要在src="/static/js/chunk-vendors.bd1ef1be.js"部分，打包的引起地址多了一个点，无论部署在哪一级目录下，如何用Nginx转发都正常，运行模式时如果用Ngnix转发到域名的二级目录下就无法正常加载static下的资源。

manifest.json中配置

"h5": {
    "title": "生产运营2.0",
    "router": {
        "base": "./"
    },
    "sdkConfigs": {
        "maps": {}
    },
    "devServer": {
        "https": false,
        "allowedHosts": ["localhost", "192.168.0.66", "我的域名"]
    }
}

Harmonyos Next教程
1 回复

在uni-app中，要确保HBuilder运行H5时生成的index.html中引用的static资源采用相对路径，可以通过配置项目的路径别名和修改资源引用方式来实现。以下是一个示例，展示了如何在uni-app项目中实现这一点。

步骤一：配置路径别名（可选）

首先，在vue.config.js（如果你使用的是Vue CLI 3+）或webpack.config.js（如果你自定义了Webpack配置）中配置路径别名。不过，uni-app通常不需要这一步，因为它已经内置了对静态资源的处理。

步骤二：调整资源引用方式

在uni-app中，静态资源通常放在static目录下。为了确保引用这些资源时使用相对路径，你可以按照以下方式操作：

  1. 确保静态资源放在static目录下：

    你的项目结构可能看起来像这样：

    your-uni-app/
├── pages/
│   ├── index/
│   │   └── index.vue
├── static/
│   ├── images/
│   │   └── logo.png
├── manifest.json
├── pages.json
└── App.vue

  2. 在Vue组件中引用静态资源：

    在Vue组件中，你可以使用相对路径来引用static目录下的资源。例如，在pages/index/index.vue中：

    <template>
  <view>
    <image src="../../static/images/logo.png" alt="Logo"></image>
  </view>
</template>

<script>
export default {
  name: 'Index'
}
</script>

<style scoped>
/* 样式中引用静态资源也可以使用相对路径 */
.logo {
  background-image: url('../../static/images/logo.png');
}
</style>

  3. 构建并运行项目：

    使用HBuilder运行你的uni-app项目，并生成H5版本的index.html。检查生成的HTML文件，你应该会看到静态资源是通过相对路径引用的。

注意事项

  • 确保在引用资源时使用正确的相对路径层级。
  • 如果你的项目结构复杂，可能需要调整路径层级以确保相对路径正确。
  • uni-app在构建时会处理静态资源的路径，因此通常不需要手动配置Webpack路径别名（除非你有特殊需求）。

通过上述步骤，你应该能够确保在HBuilder运行H5时，index.html中引用的static资源采用相对路径。

回到顶部