一、Vue引入Static目录JS
Vue项目中static目录下可以存放自定义的静态资源，如JS、CSS、图片等。Vue中引入static目录中的JS文件是十分常见的操作，可以使用以下方式：
<template>
<div>
<script src="../static/util.js"></script>
</div>
</template>
同时也可以在main.js中引入：
import Vue from 'vue'
import App from './App.vue'
import '../static/util.js'
new Vue({
el: '#app',
render: h => h(App)
})
这样我们就可以在Vue项目中引入static目录下的JS文件，并且可以使用该JS文件中的函数。
二、Vue项目的Static目录
Vue项目创建时默认会生成一个static目录，我们可以在该目录中放置一些静态资源文件，例如JavaScript、CSS、图片等。在Vue项目中引入Static目录中的文件也是十分常见的操作，例如下面我们可以引入一个CSS文件：
<template>
<div class="wrapper">
<p>这是一段文字</p>
</div>
</template>
<style scoped>
@import "../static/css/demo.css";
.wrapper {
width: 500px;
margin: 0 auto;
}
</style>
可以看到我们通过@import方式引入Static目录下的CSS文件，并且通过样式类设置了wrapper的样式，从而使该页面持有500像素宽度的样式。
三、Vue引入Static目录下的图片
在Vue项目中引入Static目录下的图片，我们经常使用到vue-loader中的file-loader。它可以将图片转换为静态资源，再通过图片的URL地址将其插入到HTML中。我们可以使用一个相对路径来引入Static目录下的图片，例如下面的代码：
<template>
<div>
<img :src="'../static/img/logo.png'">
</div>
</template>
在main.js文件中配置loader：
const vueLoaderConfig = {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader!postcss-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax!postcss-loader',
'css': 'vue-style-loader!css-loader!postcss-loader',
'less': 'vue-style-loader!css-loader!less-loader!postcss-loader',
'stylus': 'vue-style-loader!css-loader!stylus-loader!postcss-loader'
},
options: {
postcss: [
require('autoprefixer')({
browsers: ['last 20 versions']
})
]
}
}
在这个配置中我们可以看到，我们在vueLoaderConfig中定义了针对不同类型的文件的loader，并且定义了postcss配置项对生成的CSS进行post-processing。
四、Vue中Static目录和Assets文件夹目录选取
在Vue项目中，static目录和assets目录都是用来存放项目中的静态资源的，那么这两个目录到底有什么区别呢？
static目录中的文件不会被webpack处理，也不会打包进最终的构建结果中，而是直接被复制到相应目录下。所以我们可以在static目录下放置一些不需要webpack处理的静态资源。而assets目录中的文件则会被webpack进行处理，并且可以通过webpack的module机制打包成最终的构建结果。
对于选取哪一个目录，以及如何使用这两个目录，取决于你的具体需求。如果你需要处理一些静态资源，并且这些资源需要被webpack处理，则应该将其放到assets目录中。而如果你只需要将静态资源直接复制到目标文件夹中，则应该将其放到static目录中。
总结
在本篇文章中，我们通过多个阐述vue引入static目录下的文件的多个方面，包括Vue引入Static目录JS、Vue项目的Static目录、Vue引入Static目录下的图片、Vue中Static目录和Assets文件夹目录的选取。希望这篇文章能够帮助到你，在Vue项目中正确地使用Static目录下的静态资源文件！
原创文章，作者：UVDBM，如若转载，请注明出处：https://www.506064.com/n/371157.html
微信扫一扫 
支付宝扫一扫 