vue2/3解决项目打包后本地图片等资源找不到的问题

vue3+vite环境中

1.在vite.config.js里面做如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: './', // 打包的静态资源引用路径
  plugins: [vue()], // 放插件用的
  resolve: {
    alias: {
      '@': '/src' // 配置@/提示符
    }
  },
})

上述配置主要就是配置@提示符这样的话就可以@/就能访问src目录下所有的文件了

2.配置@/路径提示

按照下面方式配置一下vscode的@路径提示

  • 1.安装Path Intellisense插件
  • 2.左下角齿轮点击选择设置
  • 3.点击右上角的这个图标 在这里插入图片描述
  • 4.在里面加入下面两行代码
  "path-autocomplete.extensionOnImport": true,
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  }
  • 5.保存退出
  • 6.就会发现@/就有路径提示了

3.使用方法

例如在App.vue里面使用图片的时候(我这里图片文件在src/assets/image文件夹内)

<script setup>
import checkInpng from '@/assets/image/checkIn.png'
import { ref } from 'vue';
const checkIn = ref(checkInpng);
</script>

<template>
    <div style="font-size: 0.28rem;">
        <!-- 第一种引入方式 -->
        <img :src="checkIn" alt="">

        <hr>

        <!-- 第二种引入方式 -->
        <img src="@/assets/image/checkIn.png" alt="">
    </div>
</template>

<style scoped lang="less">
</style>

运行后会发现并无问题,地址是src下的路径地址,相当于是访问了src下面的文件,这是没毛病的

在这里插入图片描述
打包后运行项目,会发现这时的路径变成了base64字符串图片,使用base64字符串显示了图片,因此我打包出来的文件也是没图片文件的(除了pubilic里面的图片)

在这里插入图片描述

vue2和webpack环境下

只需要修改vue.config.js配置文件配置路径,其余使用方式和上面一样

const path = require("path");

module.exports = {
  baseUrl: "/",
  // ... 其他配置
  
  configureWebpack: {
    // 配置Webpack模块解析的方式,使得你可以通过模块名字而不是相对路径来引入模块
    resolve: {
      // 设置路径别名
      alias: {
        "@": path.resolve(__dirname, "src"), // 修正路径别名
      }
    }
  }
  
  // .... 其他配置
};

作为背景图在css的使用

如果是用在css里面,这里以scss为例,在scss代码里面加背景图,要加个~从根目录开始找,直接写@不起作用,如下

<template>
  <div class="container">
  </div>
</template>

<script>
export default {
  name: "",
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: calc(100vh - 204px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(~@/assets/image/empty.png);
}
</style>

在使用 Vue 3 + Vite + TypeScript 进行项目打包混淆后导致样式丢失的问题,可能是由于混淆过程中对样式文件进行了修改或错误处理引起的。以下是一些可能的解决方法: 1. 排除样式文件:在混淆配置中,确保将样式文件(如CSS或SCSS文件)排除在混淆范围之外。这可以通过插件提供的选项或正则表达式来实现。确保只混淆与 JavaScript 相关的代码,而不是样式文件。 2. 使用其他混淆工具:尝试使用其他 JavaScript 混淆工具来替代当前使用的混淆工具。不同的工具可能会对样式文件有更好的处理方式,从而避免导致样式丢失的问题。 3. 分离样式和脚本:考虑将样式和脚本分离,先加载样式文件再加载混淆后的脚本文件。这样可以确保样式文件不会受到混淆过程的影响。 4. 检查构建配置:检查一下项目的构建配置是否正确。确保没有错误的配置导致样式文件无法正确打包。特别注意构建过程中是否有对样式文件的处理或修改。 5. 调试和排查:如果以上方法都无效,可以尝试进行调试和排查。检查混淆后的代码,查看是否有对样式相关的部分进行了错误的修改或处理。同时检查开发工具的日志和错误输出,查可能与样式丢失有关的信息。 通过以上方法,你应该能够解决在混淆过程中导致样式丢失的问题。确保正确配置混淆插件,并将样式文件排除在混淆范围之外,可以保持样式文件的完整性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧寂173

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值