您的位置:

Vue中引入Static目录下的文件

一、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目录下的静态资源文件!