首页>>前端>>Vue->vue引入静态文件?

vue引入静态文件?

时间:2023-12-02 本站 点击:0

vue-cli3 静态资源配置

静态资源可以通过两种方式进行处理:

在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。

使用相对路径引入的静态资源文件,会被webpack处理解析为模块依赖。例如,在 img src="./logo.png" 和 background: url(./logo.png) ,以及CSS @import "./logo.png" 是相对的资源路径。在vue2.x版本类似assets文件夹。

2.public文件夹

public文件夹下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(文件名需指定)下。必须使用绝对路径引用这些文件,简单说就是用来存放万年不变的文件。

在vue2.x版本类似static/ 文件夹。

/public/logo.png

参考:

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。构建中,各种资源路径会被注入解析。可以使用 lodash template 语法插入内容。

除了 被 html-webpack-plugin 暴露的默认值 之外,所有 客户端环境变量 也可以直接使用。例如, BASE_URL 的用法:

vue-cli3 pubic静态资源引入

静态资源文件放入public文件夹下(类似cli2里面的static文件夹),打包时不会被wenpack处理,输出文件在dist文件夹下。

在index.html中通过

script src="%= BASE_URL %clipboard.min.js"/script

参考

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

可以看到项目中ico图标就是通过这种方式引入!!

public文件夹下文件是不被处理的,所以我们可以创建一个config.js文件

config.js

在index.html中引入

使用

遇到的问题,修改打包后的config.js文件,值不更新

排查方式:

1.先确认config.js文件是否更新,浏览器的缓存可能会影响

2.可以修改js文件名,比如加上hash值,config.hashxxx.js,在index.html引入的地方也要对应修改

综上

本地测试ok

vue怎么使用工具类中的static方法

vue怎么使用工具类中的static方法

在Vue项目中使用工具类中的静态方法,需要先引入该工具类文件,然后通过工具类名称来调用静态方法。

例如,有一个工具类文件utils.js,其中包含一个静态方法formatDate:

```

export default class Utils {

static formatDate(date) {

// some code here

}

}

```

在Vue组件中引入该工具类文件,并调用静态方法formatDate:

```

template

div

p{{ formattedDate }}/p

/div

/template

script

import Utils from '@/utils.js'

export default {

data() {

return {

date: new Date()

}

},

computed: {

formattedDate() {

return Utils.formatDate(this.date)

}

}

}

/script

```

在该Vue组件中,我们首先引入了utils.js文件,并在computed属性中定义了一个formattedDate计算属性,该计算属性调用了工具类Utils的静态方法formatDate来格式化日期。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/9398.html