• vue2.0/vue3.0 添加静态文件


    一、说明:为什么要添加静态文件?

      在vue2.0/vue3.0中添加如同static的静态文件,目的是让其在webpack中不进行打包,可以随意改动其中的配置文件内容。

    知识回顾:

    1、什么是static,什么文件放在static中?

          答:存放静态资源,webpack打包是不会对static文件夹中资源进行打包,只是复制一份(默认是 dist/static ),必须使用绝对路径来引用这些文件。所有建议放一些外部第三方。

    这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 链接来确定的

    注意:任何放在 static 中的文件需要以绝对路径的形式引用:/static/[filename]

    2、什么是asset,什么文件放在asset中?

         答:assets下面的资源,在js中使用的话,路径要经过webpack中的file-loader编译,所有webpack会对其进行打包处理,则路径不能直接写。所以建议自己的文件放在assets中。


     
    2、若把图片放在assets和static中,html页面中都可以使用;
       但是在动态绑定中,assets路径的图片会加载失败,
      因为webpack使用的是 ` commenJS ` 规范,必须使用require才可以

    3、static与asset的区别是什么?

          webpack对其打包处理不一致。

    1. 若把图片放在assets和static中,html页面中都可以使用;

    2. 但是在动态绑定中,assets路径的图片会加载失败,

    3. 因为webpack使用的是 ` commenJS ` 规范,必须使用require才可以。

         比如:

    1. export default {
    2. name: 'myDemo',
    3. data (){
    4. return {
    5. asetUrl: require('../assets/logo.png'),
    6. sticUrl: '/static/logo.png'
    7. }
    8. }

    二、使用技术

     CopyWebpackPlugin 拷贝插件

    三、vue2.0中添加静态文件public

      1、找到如下两个目录

    2、对这两个文件,进行同样的修改

    3、重新启动项目,则静态文件public就生效了,打包后显示目录如下

     三、vue3.0中添加静态文件public

         1、找到vue.config文件

         2、对这个文件进行修改

     

    3、重启项目后,静态文件夹public就生效

     

  • 相关阅读:
    STM32HAL库利用实现单击、双击、长按
    蓝桥杯练习题十 - 煤球数目(c++)
    JavaWeb---HTML
    PHP8新特性
    希尔伯特变换与SSB调制
    mybatis基础
    【数据库】哪些操作会导致索引失效
    c语言简单的双向链表的分析(可添加和删除节点)
    zabbix(三)————zabbix源码安装及部署
    Redis在Windos上的安装和启动
  • 原文地址:https://blog.csdn.net/qq_33848658/article/details/126542111