vue-cli3静态资源static assets项目结构

今天又是纠结的一天...
本文又名:vue/cli3中不得不知的webpack配置..
如你们所见，我在前文也写过

vue-cli3.0默认项目目录与 2.0的相比，更精简:
1.移除的配置文件根目录下的， build和 config等目录，
2.移除了 static文件夹，新增了 public文件夹，而且 index.html移动到 public中。
3.在 src文件夹中新增了 views文件夹，用于分类 试图组件 和 公共组件 。
4.大部分配置 都集成到 vue.config.js这里,在项目根目录下

那咱们到底怎么搞这个静态资源呢??

这里插个话：
我发现webpack官方文档是有导航栏的

粗心的一直没看到...
还在想为何网址同样内容不同

真的只有我一我的如今才发现有这个导航栏么??????
告诉我我不是一我的好很差???

回归正题:
我如今发现原来不少个人疑问均可以用这个文档解决...
你们在版本更新后不懂就多看看这个吧！！！
不知道有没有中文翻译的...没错全部的只要看这个就够了

Vue/cli3官方文档

今天学习了一下静态资源相关的

总结就是看这篇就够了（是上篇的分支哦微笑）

Static Assets Handling官方文档Vue/cli3

这样写感受很废话..可是其实说多了你看，能够写下面连接这么多文章，
虽然版本不一样，可是有些思路相似...要不要翻译看我心情了...
翻译一下：

1.相对路径引入

使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖。例如，在 <img src="./logo.png">和 background: url(./logo.png)，以及CSS@import,"./logo.png" 是相对的资源路径。在vue2.x版本相似assets文件夹。

举例 url(./image.png) 会被转换成 require('./image.png')
而<img src="../image.png">
会被编译成
createElement('img', { attrs: { src: require('../image.png') }})

URL转换规则

URL是绝对路径，如/images/foo.png,会被保留不变。
URL以.开始，会被认为是相对模块请求，根据文档结构（folder structure）转换。
URL以~开始，会被认为是模块请求,意味着能够在node modules里引用资源：
<img src="~/some-npm-package/foo.png">
URL以@开始，会被认为是模块请求，这颇有用由于，Vue CLI对默认别名@是<projectRoot>/src

2.public文件夹

public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件，简单说就是用来存放万年不变的文件。
在vue2.x版本相似static/ 文件夹。

有一些细节，懒得翻译 仍是看官方文档吧

俗话说的好，叫你看官方文档！叫你看官方文档！叫你看官方文档！
但是官方文档也很难读阿。好比我很急阿，都不知道我要看的东西在哪阿。

有点懒得翻译 相关能够参考以下连接
vue2.x版本相关参考文章
vue2.x版本相关参考文章2
vue2.x版本相关参考文章3
vue2.x版本相关参考文章4

项目结构

main.js 是咱们的入口文件，主要做用是初始化vue实例并使用须要的插件。

App.vue是咱们的主组件，全部页面都是在App.vue下进行切换的。其实你也能够理解为全部的路由也是App.vue的子组件。因此我将router标示为App.vue的子组件。

我纠结了好久为何App.vue没有import hello from './components/HelloWorld'
原来是在home.vue import了

对了Vue.use(Router)也是写在router.js里的