详解Vue-cli中的静态资源管理(src/assets和static/的区别)

Vue-cli中的静态资源管理是一项非常重要的功能,包含两个目录:src/assets和static/。在实际开发中,了解这两个目录的区别对于我们合理使用静态资源、提高开发效率非常有帮助。

一、src/assets

src/assets 目录用于存放应用程序中需要在代码中 import 的静态资源文件,如 .css.scss.js、 图片、字体、svgs 等等。这些资源最终会被 webpack 处理,webpack 会这些静态资源文件打包成不同的文件。比如.scss文件,会被打包生成.vue的style标签。

示例1:

比如我们有个logo.png图片,在代码中需要使用,可以在src/assets目录中新建一个名为logo.png的文件,然后在代码中引用:

<template>
  <div>
    <img src="@/assets/logo.png" alt="logo">
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scoped>
img {
  width: 100px;
  height: 100px;
}
</style>

在代码中使用 @/assets/logo.png 即可。

二、static/

static/ 目录用于存放静态资源,这些静态资源不会经过 webpack 编译处理,打包时直接被复制到输出目录(dist/)中。这意味着,无论你是否使用这些资源,它们都会被打包输出。

示例2:

比如我们有一个 .pdf 文件叫做 agreement.pdf,这个文件需要提供给用户上传。在代码中不需要引用这个文件,只是需要将文件放在输出目录中。我们把这个文件放在 static/ 目录下面。

<template>
  <div>
    <p>请上传协议文件:XXXXXXXXXX</p>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scoped>

</style>

在上传时直接调用 static 目录下的 agreement.pdf 文件即可。

总的来看,src/assetsstatic/ 两个目录各有用武之地,通过灵活使用这两个目录,可以有效提高开发效率。

如果有继续的问题,欢迎提出。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解Vue-cli中的静态资源管理(src/assets和static/的区别) - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 详解从新建vue项目到引入组件Element的方法

    下面就是关于“详解从新建vue项目到引入组件Element的方法”的完整攻略: 一、新建vue项目 首先,在命令行窗口中执行以下命令,使用vue-cli创建一个新的vue项目: vue create my-project 其中,“my-project”是你想要命名的项目名称,你可以自己调整。 执行完该命令后,会提示你选择一个vue项目的配置模板,如果你是一个…

    Vue 2023年5月28日
    00
  • axios向后台传递数组作为参数的方法

    当使用 axios 向后台传递数组作为参数时,可以通过两种方法来实现。 方法一:使用 URLSearchParams 对象 在前端将数组转换为 URLSearchParams 对象,再通过 axios 发送请求。具体代码如下: import axios from ‘axios’; const params = new URLSearchParams(); c…

    Vue 2023年5月29日
    00
  • Vue首屏加载过慢出现白屏的6种优化方案汇总

    当使用Vue.js开发网站时,如果页面首屏加载过慢,会出现白屏现象,这不仅对用户体验不友好,还会影响搜索引擎收录等问题。为了解决这个问题,我们可以尝试以下6种优化方案。 1. 使用首屏骨架屏 在页面白屏的情况下,优化方案之一是使用首屏骨架屏。骨架屏是一种占位符,能够显示页面主要内容的布局和结构,让用户能够感知到页面加载的进度,提高用户体验。我们可以使用Vue…

    Vue 2023年5月28日
    00
  • vue3.0安装Element ui及矢量图使用方式

    下面是详细讲解“vue3.0安装Element ui及矢量图使用方式”的完整攻略。 Vue3.0安装Element UI Element UI是一套基于Vue.js 2.0的UI框架,提供了大量的组件和样式。下面是安装Element UI的步骤: 步骤一:安装Element UI 可以使用npm来安装Element UI,在命令行中输入以下命令: npm i…

    Vue 2023年5月28日
    00
  • vue实现input输入模糊查询的三种方式

    当需要在页面的input输入框中输入内容,并根据输入的内容快速实现模糊查询时,可以使用Vue实现这一功能。下面将介绍三种方式来实现input输入模糊查询。 方式一:watch监听input输入,模糊查询 首先,在Vue组件中定义需要监听的变量(inputValue),并使用watch监听该变量的变化,一旦变化则执行查询操作。具体实现代码如下: <tem…

    Vue 2023年5月27日
    00
  • Vue如何引入远程JS文件

    Vue框架提供了多种方式来引入远程的JavaScript文件。下面详细介绍两种常用的方式。 方式一:通过script标签引入 我们可以在Vue组件内使用script标签来引用远程JS文件。下面是一个示例: <template> <div> <h1>Hello Vue</h1> <button @click…

    Vue 2023年5月28日
    00
  • Vue项目中接口调用的详细讲解

    下面是“Vue项目中接口调用的详细讲解”的完整攻略。 Vue项目中接口调用的详细讲解 在Vue项目中使用接口调用是一个非常常见的需求。下面将详细讲解如何在Vue项目中进行接口调用。 1、安装axios 在Vue中使用axios进行接口调用需要先安装axios,可以通过npm安装。在终端中输入以下命令: npm install axios –save 安装完…

    Vue 2023年5月28日
    00
  • Vue前端书写规范大全(非常详细!)

    首先我们来谈谈Vue前端书写规范大全的重要性,这是因为在Vue开发中,写好规范的代码能够提高代码的可读性和可维护性,同时也能够避免很多不必要的错误和 bug,因此Vue前端书写规范大全是非常重要的。 Vue前端书写规范大全主要包括以下几个方面: 1. 文件命名规范 1.1 Vue 单文件组件命名规范 Vue 单文件组件(.vue 文件)应按照以下格式进行命名…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部