跟着项目学Vue.js(四) 工程目录结构分析(下)_images and other types of assets omitted.

作者：寸_铁 | 2024-08-02 05:04:48

踩

images and other types of assets omitted.

工程目录结构如下：


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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/917326