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

这篇具有很好参考价值的文章主要介绍了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才可以。

     比如:


export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}

二、使用技术

 CopyWebpackPlugin 拷贝插件

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

  1、找到如下两个目录

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

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

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

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

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

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

     1、找到vue.config文件

     2、对这个文件进行修改

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

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

 文章来源地址https://www.toymoban.com/news/detail-501511.html

到了这里,关于vue2.0/vue3.0 添加静态文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 表单的总数据为什么可以写成一个空对象,不用具体的写表单中绑定的值,vue3

      from为空对象  在v-model里写form.name,其实就是在form这个空对象里添加了一个键名为name的成员,你不用在script标签的form对象里面特意写name属性。

    2024年01月23日
    浏览(66)
  • JavaScript——为什么静态方法不能调用非静态方法

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月11日
    浏览(60)
  • C静态库的创建与使用--为什么要引入静态库?

    C源程序需要经过预处理、编译、汇编几个阶段,得到各自源文件对应的 可重定位目标文件 ,可重定位目标文件就是各个源文件的二进制机器代码,一般是.o格式。比如:util1.c、util2.c及main.c三个C源文件,经过预处理器、编译器、汇编器的处理,就可以得到各自的目标文件u

    2024年02月08日
    浏览(43)
  • Vue3.0极速入门- 目录和文件说明

    以下文件均为npm create helloworld自动生成的文件目录结构 目录截图 目录说明 目录/文件 说明 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里 assets 放置一些图片,如logo等。 components vue组件文件的存放目录,也是主要的工作目录

    2024年02月11日
    浏览(39)
  • facebook多账号运营为什么要用静态住宅ip代理?

    在进行Facebook群控时,ip地址的管理是非常重要的,因为Facebook通常会检测ip地址的使用情况,如果发现有异常的使用行为,比如从同一个ip地址频繁进行登录、发布内容或者在短时间内进行大量的活动等等,就会视为垃圾邮件或者恶意行为,导致账户被禁用或者限制。 因此,

    2024年02月21日
    浏览(49)
  • 为什么在js中需要添加addEventListener()?

    addEventListener(监听器)--- EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)。 addEventListener(

    2024年02月19日
    浏览(38)
  • vue3项目服务器静态文件部署增加指定路由地址完整实现

    在 Vue 3 项目中,如果你想要配置服务器以便让它在特定的地址上运行,你通常是在使用 Vue CLI 的 devServer 配置。这主要是通过修改 vue.config.js 文件实现的。 如果你希望开发服务器绑定到特定地址,比如 192.168.1.100 ,可以这样做: 在项目根目录下创建或修改 vue.config.js : 如果你

    2024年02月07日
    浏览(44)
  • 为什么除了null外,任何元素不得添加到上<? extends T>

    使用泛型类型参数限定为 ? extends T 时,我们无法确定实际类型参数是什么。这意味着我们只能安全地读取该类型的数据,但不能写入除了 null 以外的任何元素。 下面是一个示例代码,说明为什么无法向 ? extends T 类型的集合中添加任何元素: 在上面的示例中,我们有一个 i

    2024年02月12日
    浏览(42)
  • Vue-33、Vue中为什么使用render函数

    1、main.js 2、查看引入vue 引入的dist/vue.runtime.esm.js 查看vue.runtime.esm.js 大小 此时引入的是残缺的Vue 无模板解析器。打包之后体积小一点。 而render: h = h(App), 可以进行模板解析。

    2024年01月23日
    浏览(39)
  • 【PDF密码】PDF文件为什么无法修改?为什么PDF文档不支持编辑?

    pdf文件大家应该都经常接触,但是不知道大家会遇到这种情况:有些PDF文件打开之后无法编辑?是什么原因呢?今天我们来分析一下都是那些原因导致的。 首先我们可以考虑一下,PDF文件中的内容是否是图片,如果确认是图片文件,那么我们想要编辑,就可以先使用PDF编辑器

    2024年01月22日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包