一、Vue项目中的图片资源存放位置

    public目录：

    • 适用于不需要webpack处理的静态资源，如favicon.ico、第三方库等。
    • 直接通过相对路径或绝对路径引用，不会被webpack打包。

    src/assets目录：

    • 适用于需要webpack处理的资源，如项目中的图片、图标等。
    • 通过webpack进行打包和路径转换，需要使用require或import语法引入。

二、使用相对路径引入图片的问题与解决方法

问题描述

例如，你的文件目录结构如下：

src/
  assets/
    banner1.jpg
    banner2.jpg
  components/
    MyComponent.vue

<img src="./banner1.jpg" />
<img src="./html/hanjiang/hanjiang/src/assets/banner2.jpg" />

解决方法

    • 确认banner1.jpg和banner2.jpg确实存在于src/assets目录下。
    • 使用require语法来引入图片，确保路径正确：
data() {
  return {
    bannerImg: [
      require('@/assets/banner1.jpg'),
      require('@/assets/banner2.jpg')
    ]
  };
}

在模板中使用：

<img :src="bannerImg[0]" />
<img :src="bannerImg[1]" />

三、SVG图片的引入方式

直接在<img>标签中使用SVG文件路径

<img src="@/assets/logo.svg" />

注意事项

    文件路径：

    • 确保SVG文件的路径正确。如果SVG文件位于public文件夹中，可以直接通过相对路径或绝对路径引用。如果位于assets文件夹中，需要使用require语法。

    跨域问题：

    • 如果SVG文件托管在不同的域上，确保处理了跨域资源共享（CORS）问题。

将SVG作为Vue组件使用

Vue还提供了将SVG作为组件来使用的更灵活方式，允许在SVG内部使用Vue的响应式数据绑定和指令等特性。

<template>
  <svg>
    <use xlink:href="#icon-logo"></use>
  </svg>
</template>

四、动态引入图片资源

问题描述

解决方法

data() {
  return {
    imageList: [
      require('@/assets/image1.jpg'),
      require('@/assets/image2.jpg')
    ]
  };
}

在模板中使用：

<div v-for="image in imageList" :key="image">
  <img :src="image" />
</div>

五、使用Nginx部署Vue项目

步骤总结

    编译并打包Vue项目：

    • 执行npm run build或yarn build，生成的文件将存放在项目的dist目录中。

    安装Nginx：

    • 在Debian或Ubuntu系统上，通过sudo apt update和sudo apt install nginx安装。

    配置Nginx：

    • 创建或编辑服务器块，指向Vue.js构建的目录，并设置相关参数（监听端口、服务器名等）。

    使配置生效：

    • 保存Nginx配置文件，创建软链接，重新加载或重启Nginx。

    访问Vue应用：

    • 通过配置的域名或IP访问Vue应用，注意初次加载可能会较慢。

优化技巧

  • 启用HTTP/2：提高加载速度。
  • 开启GZIP压缩：减少传输数据量。
  • 优化图片加载和缓存：提升用户体验。

六、总结