Vue可以将static目录指向静态文件,在Vue中指向static文件夹的方式十分简单,只需要在项目根目录下新建一个static文件夹,然后在Vue的配置文件中,添加如下配置:
module.exports = {
baseUrl: '/',
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false,
devServer: {
port: 8080,
proxy: null
}
}
在这个配置文件中,assetsDir表示静态文件存放的目录,默认情况下是放在根目录下的assets文件夹,通过配置将其改为static,这样我们就可以将相关的静态文件放在该文件夹下了。例如,我们将图片放在static文件夹下,在组件中通过相对路径引用即可:
在构建项目时,Vue会将整个static文件夹拷贝到输出目录(即dist文件夹)下,这样我们可以放心地引用这些静态资源。