vue 项目中图片选择路径位置static 或 assets区别

本文详细解析了Vue CLI项目中assets与static文件夹的使用区别,包括它们在项目打包过程中的处理方式,以及如何根据文件类型选择合适的存放位置,以实现更优的资源管理和部署效果。

用 vuecli 的话默认情况下 static 中的文件不会经过 webpack 相关 loader 处理

assets 里面的图片是会经过 webpack 的 loader 处理的,而 static 里面的图片是被直接复制到 dist/static 下面的。
一般是把一些小图片放在 assets 里面,这样一些小图片就可以处理成 base64 了,或者全放在 assets 下面都可以。

相同点:
  assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下。

不相同点:
  assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器

  static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。所以简单点使用建议如下:

  将项目中template需要的css文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。

 

Vue 项目中配置环境变量以设置图片路径,可以通过以下方式实现。 ### 1. 使用 `.env` 文件配置环境变量 Vue 项目支持通过 `.env` 文件定义环境变量,这些变量需要以 `VUE_APP_` 为前缀。例如,在项目根目录下创建 `.env.development` 和 `.env.production` 文件,分别用于开发环境和生产环境的配置: ```env # .env.development VUE_APP_IMG_URL = '/static/images' ``` ```env # .env.production VUE_APP_IMG_URL = 'https://cdn.example.com/images' ``` 在代码中,可以通过 `process.env` 访问这些变量: ```html <template> <img :src="`${process.env.VUE_APP_IMG_URL}/logo.png`" /> </template> ``` 这种方式可以在不同环境中动态切换图片资源路径,而无需修改代码中的具体地址 [^1]。 ### 2. 配置 `public` 目录下的静态资源 对于需要全局访问的静态资源(如图片、字体等),可以将其放在 `public` 目录下,并通过创建一个配置文件(如 `public/static/config.js`)来定义图片路径: ```javascript // public/static/config.js window.BASICS_CONFIG = { VUE_APP_IMG_URL: 'https://www.example.com/images', }; ``` 在 HTML 文件中引入该配置文件: ```html <script src="/static/config.js"></script> ``` 在 Vue 组件中使用全局变量: ```html <template> <img :src="`${window.BASICS_CONFIG.VUE_APP_IMG_URL}/logo.png`" /> </template> ``` 这种方式适用于需要在多个项目中共享配置的情况 [^1]。 ### 3. 在 `vue.config.js` 中动态计算环境变量 如果需要根据项目构建时的上下文动态生成环境变量,可以在 `vue.config.js` 中进行配置。例如,从 `package.json` 中读取版本号并作为环境变量注入: ```javascript // vue.config.js const version = require('./package.json').version; module.exports = { devServer: { // ... }, configureWebpack: { plugins: [ new webpack.DefinePlugin({ __APP_ENV__: JSON.stringify(version), }), ], }, }; ``` 虽然这种方式主要用于注入构建时信息,但也可以用于动态设置图片路径 [^2]。 ### 4. 动态加载图片路径Vue 项目中,图片路径可以动态构建。例如,使用 `require` `import` 来动态加载 `src/assets` 目录下的图片资源: ```html <template> <img :src="imagePath" /> </template> <script> export default { data() { return { imagePath: require('@/assets/images/logo.png'), }; }, }; </script> ``` 对于轮播图等需要动态切换的图片资源,可以使用循环构建路径: ```javascript data() { return { imgList: this.getImgList(), activeIndex: 0 }; }, methods: { getImgList() { let arr = []; for (let i = 0; i < 4; i++) { let url = require(`@/assets/image/carousel${i}.png`); arr.push(url); } return arr; } } ``` 这种方式适用于本地静态资源的管理 [^3]。 ### 5. 使用 CDN 加速图片加载 如果图片资源较大需要提升加载速度,可以直接使用 CDN 提供的 URL: ```html <template> <img :src="'https://cdn.example.com/images/logo.png'" /> </template> ``` 这种方式适用于需要全局加速的图片资源 [^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

船长在船上

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

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

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

打赏作者

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

抵扣说明:

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

余额充值