关于vue-cli文件引入路径

使用vuecli完成项目的时候，经常会引入各种文件。而每次引入的时候使用相对路径的话，是非常麻烦的。如果使用vue-cli的话，可以用~@来代表src文件，之后通过绝对路径来引用文件。

vue-cli默认配置alias，将@配置为src文件，可以在\node_modules\@vue\cli-service\lib\config\base.js这个文件里看到源码

.alias
        .set('@', api.resolve('src'))

所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。

还有一点需要强调的是，css文件和image需要放在src下的assets文件夹下才可以被识别到，具体原因不详。估计是因为webpack的配置问题，这里放上webpack关于alias的配置文档，供大家学习https://webpack.docschina.org/configuration/resolve/#resolve-alias

 

vue-cli静态资源的引用方法：https://cli.vuejs.org/zh/guide/css.html#%E5%BC%95%E7%94%A8%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90

vue-cli会如何处理静态资源：

https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90