zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    python之地基(一)
    pickle库的使用详解
    Python骚操作:动态定义函数
    10个高效的pandas技巧
    Python趣味应用 | AI告诉你张无忌最爱的竟是
    兵贵神速!掌握这10个python技巧,让你代码工作如鱼得水!
    python选方向?大数据的职位你了解多少
    python入门学习--小白篇(用python绘制五角星)
    如何让 python 处理速度翻倍?内含代码
    核心Python知识(一)
  • 原文地址:https://www.cnblogs.com/yuxi2018/p/14639246.html
Copyright © 2011-2022 走看看