Vue中静态地址的使用方式

处理资源路径

当你在JavaScript、CSS或 *.vue 文件中使用相对路径，必须以.开头引用一个静态资源，该资源将被webpack处理。 如果你把静态资源放在 public文件中，则不会被webpack处理。

路径的转换规则

• 如果路径是绝对路径，会被原样保留

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

// 渲染后的html
<img data-v-780434df src="/src/assets/image/logo.png" alt="">
// 这个图片是无法展示的，因为编译后文件以及不在src/assets/image文件夹下了

• 如果路径以 . 开头，将会被看作相对的模块依赖

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

// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

• 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，所有vue-cli 创建的项目都默认配置了将 @ 指向 /src

<img src="@/assets/image/logo.png" alt="">

// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

• 如果路径以 ~ 开头，其后的部分将会被看作模块依赖，既可以加载含有别名的静态支援。又可以加载node-modules中的资源 。

<img src="~@/assets/image/logo.png" alt="">
// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

<img src="~[npm包名]/assets/image/logo.png" alt="">
// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

何时使用 public 文件夹

** 通过webpack的处理并获得以下好处：**

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求
• 文件丢失会直接编译时报错，而不是到了用户端产生404错误
• 最终生成的文件名包含了内容哈希，因此不必担心浏览器会缓存老版本

以下情况考虑使用 public 文件夹：

• 需要在构建输出中指定一个固定的文件名字
• 有很多图片，需要动态的去引用它们的路径
• 有些库可能和webpack不兼容，除了将其用一个独立的 script 标签引入没有别的选择

使用 public 文件夹的注意事项

• 如果你的应用没有部署在域名的根目录下，那么你需要为你的 URL 配置 publicPath 前缀

// vue.config.js 
module.exports = {
    publicPath: process.en.NODE_ENV === 'production' ? '/cart/' : '/'
}

• 在 public/index.html 等通过 html-webpack-plugin 用作模板的 HTML 文件中， 你需要通过 <%= BASE_URL %> 设置链接前缀

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

• 在模板中，先向组件传入BASE_URL

<template>
	<img :src=`${publicPath}image/logo.png` alt="">
</template>

<script>
data() {
    return {
        publicPath: process.env.BASE_URL
    }
}
</script>