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目錄下的靜態資源文件！