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里的