qq_37910571 2024-08-06 21:26 采纳率: 0%
浏览 46

vite 处理静态资源路径问题

使用 vite 搭建的 vue3 项目，使用 vite.config.ts 中 base:"./",因为要在 nginx 下部署多个前端项目，切在打包过程中，并不知晓当前项目的路径，所以使用 相对路径，但是项目中引用了 less 文件，less 文件中的背景图片 background:url("@/assets/img/bg.png"),会在打包后边为 background-image:url("./bg.png"),路径错误，相对于 Index.html 而言应该是./assets/bg.png，应该怎么解决？（不想放在 public 中，因为后需要需要经过 vite 处理静态资源）

  • 写回答

2条回答 默认 最新

  • 一直免费一直爽 2024-08-11 20:06
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    要解决这个问题，首先确保你在<head>标签内包含了正确的<link>元素，用于引入Less文件。在Vite配置中，你可以通过设置base属性来实现这一点。

    以下是具体的步骤：

    1. 在你的vite.config.ts文件中添加一个htmlWebpackPlugin插件：
    import HtmlWebpackPlugin from 'html-webpack-plugin';

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      chunks: ['vendors', 'main'],
    }),
  ],
};
    1. 确保你的<head>标签内有<link>元素引用@/assets/stylesheets/index.less作为样式表：
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue App</title>

  <!-- 引入 Less 文件 -->
  <link rel="stylesheet" href="@/assets/stylesheets/index.less">

  <!-- 其他 HTML 标签和属性 -->

</head>
<body>
  <div id="app"></div>
  <script src="/js/main.js"></script>
</body>
</html>

    现在，你应该能够在<head>标签内的<link>元素引用到@/assets/stylesheets/index.less。这样，当Vite处理静态资源时，它会自动将background-image属性替换为你希望的目标路径。

    如果你仍然遇到问题，可能是因为在部署过程中，你需要将CSS文件移动到特定的位置，如public目录下的css子目录。为了覆盖这些更改，可以在Vite配置中添加额外的配置选项以指定CSS文件的输出位置。例如：

    // vite.config.ts
export default {
  // ...
  css: {
    extract: false,
    postCss: [require('autoprefixer')],
    output: {
      css: true,
      dir: 'public/css',
      filename: '[name].css',
    },
  },
};

    然后，在你的HTML文档中添加<link>元素指向这个新的CSS输出路径。

    <link rel="stylesheet" href="public/css/[name].css" />

    这样，你就解决了background-image属性的问题，并且可以正确地将CSS文件输出到指定的位置。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 8月6日

悬赏问题

  • ¥15 Windows Script Host 无法找到脚本文件"C:\ProgramData\Player800\Cotrl.vbs”
  • ¥15 matlab自定义损失函数
  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 求往届大挑得奖作品（ppt…）
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图