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

最新推荐文章于 2024-09-23 08:00:00 发布

百里牛金

最新推荐文章于 2024-09-23 08:00:00 发布

阅读量1.1w

点赞数 7

分类专栏： vue 跟着项目学Vue.js 文章标签： vue.js vue 前端

本文链接：https://blog.csdn.net/m0_37057454/article/details/82494353

版权

vue 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

跟着项目学Vue.js

8 篇文章 2 订阅

订阅专栏

工程目录结构如下：

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是怎么解决的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>hello-world</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

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

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

这也表明对于前端来说，您必须有一个可以访问到的网站图标，不管你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如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue App</title>
    <link href="/about.js" rel="prefetch">
    <link href="/app.js" rel="preload" as="script"></head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/app.js"></script>
  </body>
</html>