Vue3.0静态文件存放路径与引用方式

下面是关于Vue3.0静态文件存放路径与引用方式的完整攻略：

静态文件存放路径

在Vue3.0中，静态文件被默认存放在public文件夹中，该文件夹位于项目根目录下。在public文件夹中，你可以自由创建文件夹存放静态资源，例如images、css、js等文件夹。

值得注意的是，public文件夹中的文件可以被直接引用，例如<img src="/images/logo.png" />，路径以“/”开头，代表项目根目录。

如果你希望修改静态文件存放路径，可以通过Vue Cli的webpack配置实现。具体操作如下：

1.打开vue.config.js文件

如果你的Vue项目中没有vue.config.js文件，可以自行创建一个。注意文件名必须是vue.config.js。

2.添加webpack配置

在vue.config.js文件中添加如下代码：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('assets', '@/assets')
  }
}

在上述配置中，我们为assets文件夹指定了别名，该别名对应了src/assets文件夹。这样，当我们在代码中引用静态文件时，可以使用“~assets”的形式，例如：

<img src="~assets/images/logo.png" />

需要注意的是，如果你修改了静态文件存放路径，使用<img src="/images/logo.png" />这样路径以“/”开头的引用方式已经不再适用。

静态文件引用方式

Vue3.0中，可以通过如下方式引用静态文件：

1.在模板中直接使用

例如在template中，我们可以使用标签直接引用图片：

<template>
  <div>
    <img src="./assets/logo.png" alt="logo" />
  </div>
</template>

需要注意的是，引用图片时，路径要以“./”开头，表示当前文件夹。如果你使用了“/”开头的路径，Vue会将该路径解析为相对于项目根目录的路径。

2.在JavaScript中引用

在JavaScript代码中，我们可以通过import或require语句引用静态文件。

以import语句为例：

import logo from '@/assets/logo.png'
console.log(logo)

在以上代码中，我们使用了@别名，该别名指向了src目录。这样，我们就可以使用“@/assets/logo.png”的形式引用静态文件了。

以上就是Vue3.0静态文件存放路径与引用方式的完整攻略。希望能对你有所帮助。