跟着项目学Vue.js(四) 工程目录结构分析(下)

 工程目录结构如下：

hello-world
|
|-- node_modules                     //模块文件夹，存放package.json中列出的依赖项
|-- public
|-- |-- favicon.ico                  //网站图标
|-- |-- index.html                   //入口页面
|-- src   
    |-- assets                       // 静态文件，比如一些图片，json数据等
|   |-- components                   // vue公共组件
    |-- views                        // 以页面为单位的vue文件、html文件等
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|   |-- router.js                    // vue的路由管理
|   |-- store.js                     // vuex
|-- tests                            // 单元测试
|-- package.json                     // 项目基本信息,包依赖信息等
|-- README.md                        // 项目说明
|-- 一些配置文件如.gitnore、yarn.lock等

两个文件夹：public和src

1、public文件夹

|-- public
|-- |-- favicon.ico                  //网站图标
|-- |-- index.html                   //入口页面

1)网站图标

文件夹中的两个文件分别是网站图标(favicon.ico)和入口页面(index.html)，所有的web工程几乎都是这样开场的。

这是因为在浏览器中输入url后，浏览器默认会请求网站图标favicon.icon，因此如果事先在index.html中并没有对网站图标的设置，而网站根目录也没有这个图标，就会返回 404。

   来看我们的 index.html是怎么解决的：

   在index.html文件中，通过 link标签设置了网站图标路径。

这也表明对于前端来说，您必须有一个可以访问到的网站图标，不管你base64也好，内部路径、外部路径也好，反正得有，要不然终归逃不过一个404！

但我现在就是不想要这个网站图标，怎么办呢？这件事你前端不用管了，咱直接去web服务器里搞：

if(请求==favicon){
    别返回404
}

         一行代码不就解决了了吗？所以说了解nodejs很重要，最起码了解了它，你才能知道到底哪些工作是不应该由你来处理的。

2)生产环境中的index.html

执行yarn run build生产环境打包命令，发现在工程根目录添加多了一个dist文件夹

D:\vuestore\hello-world>yarn run build
yarn run v1.7.0
$ vue-cli-service build

/  Building for production...


 DONE  Compiled successfully in 11795ms                                                                         14:46:16

  File                                 Size               Gzipped

  dist\js\chunk-vendors.19368321.js    112.02 kb          38.81 kb
  dist\js\app.0c92f7d7.js              6.27 kb            2.31 kb
  dist\js\about.2d341050.js            0.47 kb            0.33 kb
  dist\css\app.aac77199.css            0.42 kb            0.26 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Done in 16.99s.

 

打包文件就在dist文件夹下了

 

打包之后的网站图标和index.html都在根目录下，所以在生产环境中，index.html中不需要配置网站图标，dist文件夹下的index.html如下：