VUE 引入公共css样式的方法

初学vue，在项目中引入公共css样式的时候发现在index.html页面直接使用  <link rel="stylesheet" type="text/css" href="./src/css/index.css">  引入样式是无效的，通过查阅资料得知这么引入需要css文件在static文件夹下（具体原因我也不清楚，百度有说config文件中index.js文件的  assetsSubDirectory: 'static',  参数决定的），那么问题来了，引入公共样式应该怎么引入呢？

项目文件：

第一种方式：css样式在static文件夹下，在index.html中直接<link rel="stylesheet" type="text/css" href="./src/css/index.css">引入

第二种方式：css在src文件夹下，通过在src文件夹下的main.js文件中使用es6的引入方式进行引入：

import "./css/index.css" 

第三种方式：直接在需要对应的vue中使用es6进行引入：

<style scoped>
@import "../css/index.css";
</style>

目前我就找出这几种方式，网上有说static是通过webpack打包以后的文件，所以引入直接<link rel="stylesheet" type="text/css" href="./src/css/index.css">即可，具体我也不是很了解，如果有大佬知道还请麻烦告知。

 

针对cingig中的assetsSubDirectory属性有这样的一个解释：

build.assetsSubDirectory

被webpack编译处理过的资源文件都会在这个build.assetsRoot目录下，所以它不可以混有其它可能在build.assetsRoot里面有的文件。例如，假如build.assetsRoot参数是/path/to/dist，build.assetsSubDirectory 参数是 static, 那么所以webpack资源会被编译到path/to/dist/static目录。

每次编译前，这个目录会被清空，所以这个只能放编译出来的资源文件。

static/目录的文件会直接被在构建过程中，直接拷贝到这个目录。这意味着是如果你改变这个规则，所有你依赖于static/中文件的绝对地址，都需要改变。