Vue 脚手架（打包工具）的理解 - 配置文件理解

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

序言

Vue 脚手架是 Vue 作为一个前端开发项目的最核心点将JavaScript、CSS、HTML这几种前端自动整合极大的简化了前端开发工作。

没有 Vue 脚手架就没有 Vue 这是一定的Java 语言和C语言都需要编译那么你可以将 Vue 脚手架看作是伪编译器吧或者是伪解释器当然伪解释器比较准确点。

个人理解

在笔者看来Vue 项目有时会出现两个问题一个是旧版本的 Vue 脚手架一个是新版本的Vue 脚手架笔者不太清楚哪些 Vue脚手架版本是算是旧版还是新版但是很明确的知道部分Vue 项目的的确确会出现一种情况那就是没有 public 目录的情况当遇到这种情况的确会出现额外的问题需要解决问题在于 index.html 文件的放置问题比如新版 Vue 脚手架正常情况下index.html 文件都会在 Vue 项目创建时便已被放置在 public 目录下但是旧版 Vue 脚手架却会直接将 index.html文件放置在 Vue 项目的根目录下在我看来有些不规范对于强迫症而言的确有些不舒服。

笔者尝试修改旧版 Vue 脚手架 index.html 路径问题思路如下

修改 process.env.BASE_URL但涉及源码比较深入不宜操作舍弃
关于开发环境和生产环境下的自定义 index.html 路径问题但是打包时容易出错无法正常打包这一点看问题1 的报错有解决方法。推荐

下面是笔者在无 public 目录情况下遇到的 Vue 项目开发问题集锦。

如下问题出现的前提Vue项目创建后没有 public 目录的情况

问题 1 新建 public 目录修改其打包路径问题

已解决记录一下解决过程

开发环境index.html文件路径配置

新建了 public 目录并将 index.html 目录移动到 public 目录内并修改 webpack.dev.conf.js 开发环境配置文件文件内的 HtmlWebpackPlugin 配置如下所示

在这里插入图片描述

 new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './public/index.html',
      inject: true
    }),

成功在本地开发环境运行成功cnpm run dev并显示在本地浏览器上在webpack.prod.conf.js 文件生产环境配置文件内设置了一样的配置。

当然笔者不保证是一样的配置路径笔者这里的是相对路径配置所以如果你打包时会出现如下报错那么仔细研究下路径问题到底是'./public/index.html'还是 '../public/index.html'

报错

在这里插入图片描述

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'E:\VueProject\public\index.html' in 'E:\VueProject\testproject':
  Error: Can't resolve 'E:\VueProject\public\index.html' in 'E:\VueProject\testpriject'

问题2 favicon 图标的放置问题

如果有 public 目录那么正常情况下我们都能将 favicon 图标放置在 public 目录下当然这一点在 index.html 文件内需要我们配置好 favicon 的路径如下

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

但是很遗憾我们无法如此会遇到报错 Vue Template execution failed: ReferenceError: BASE_URL is not defined

当然我们也不用这么麻烦只需要将 favicon.ico 的图标文件放到 static 文件就行了打包的时候就不会出错了当然这里笔者的 index.html 配置如下所示

<link rel="icon" href="<%= htmlWebpackPlugin.options.url %>/static/favicon.ico">

不是所谓的

<link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico">

当然如果实在是强迫症的想要将其图标文件放到 public 目录下可以研究下 CopyWebpackPlugin 插件

在这里插入图片描述
该插件的作用在于收集静态文件到指定的打包路径位置所以应该可以打包 public 目录下的静态文件。如下解决问题2 参考链接4 02-02模块化作业

在这里插入图片描述

当然上面只是启发具体的实现是在 webpack.prod.conf.js 文件生产环境配置文件开发环境的配置也是如此webpack.dev.conf.js

1、生产环境打包配置 `webpack.prod.conf.js`

注意看是 config.build.assetsSubDirectory

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../public'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

笔者发现了一点不好的是如果将 index.html 和 favicon.ico 文件放到 public 目录内那么打包时也会顺便把 index.html 复制两份一份是在 Vue 打包的 dist 根目录下的一份是在 static 目录内有些冗余不规范且麻烦要手动删除。
在这里插入图片描述

所以这里还需要配置一个忽略 index.html 的设置。如下

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../public'),
        to: config.build.assetsSubDirectory,
        ignore: ['index.html']
      }
    ])

2、开发环境 `webpack.dev.conf.js` 配置

注意看是 config.dev.assetsSubDirectory

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../public'),
        to: config.dev.assetsSubDirectory,
        ignore: ['index.html']
      }
    ])