多页面应用，vue cli 配置不生成 html 文件

已解决

使用的 vue-cli v5.0.8 版本。

原本生成的 html 文件为 index.html，callback.html，error.html，所以删除处理 html 的 plugin 即可。

chainWebpack: (config) => {
  config.plugins.delete('html-index')
  config.plugins.delete('html-callback')
  config.plugins.delete('html-error')
}

可以打印看看 config.plugins 就知道使用了那些 plugin 了。

例如下面这个，public 目录的内容就不会复制到 dist 目录了。

config.plugins.delete('copy')

以上。

---

下面是之前尝试过的解决方法，留作记录。

1，需求

前端多页面应用。打包后的文件

• html 文件放到 Nginx
• 其他文件放到 CDN

打包后的 js 没有使用 hash 来命名，所以每次打包后的 js 名称都一样。

这样的话 html 文件中引入的 js 文件名不变，所以 html 文件内容也不会变。

所以第一次打包后，将 html 放到 Nginx 上，之后的打包就不需要生成 html 文件，只生成 js，css，img。通过 devOps 运行打包命令，并自动压缩 dist 目录，接着上传到 CDN。

2，解决方案

经过调研，有 3 种解决方案

1，保持现状

即便打包后的 dist 目录中有 html 文件也是可以的，一起上传到 CDN 上也不会影响功能，只是有了多余文件。

2，不生成 html 文件

3，将生成的 html 文件放到其他目录。

因为设置了 devOps 只会处理指定的目录。

这2种实现的原理相同，都是指定 html 文件的输出路径

• filename: ''
• filename: '其他目录'

有一个问题，当 filename: '' 打包时，结果符合预期，但打包命令会执行出错！

因为打包命令运行到处理 html 文件时，会报错退出执行。原因是 filename 目录必须合法：是字符串类型而且不为空。

ERROR  Error: EISDIR: illegal operation on a directory, open 'D:\xxx\dist'
Error: EISDIR: illegal operation on a directory, open 'D:\xxx\dist'
ELIFECYCLE  Command failed with exit code 1.
WARN   Local package.json exists, but node_modules missing, did you mean to install?

3，实现

1，项目结构

-- public
   -- images
-- src
   -- api
   -- components
   -- pages
      -- callback
         -- index.vue
         -- main.js
      -- index
         -- index.vue
         -- main.js
      -- error
         -- index.vue
         -- main.js
-- package.json
-- vue.config.js

2，vue.config.js 核心配置

多页面 pages 配置参考

const glob = require('glob')
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

function getEntries(globPath) {
  const files = glob.sync(globPath), entries = {}
  /* 
    files [
      'src/pages/callback/main.js',
      'src/pages/error/main.js',
      'src/pages/index/main.js',
      'src/pages/payconfirm/main.js'
    ]
    获取所有匹配文件的路径，取倒数第二层(pages下面的文件夹)做包名
  */
  files.forEach(function (filepath) {
    const split = filepath.split('/')
    const name = split[split.length - 2]
   	/* 
      entries[name] 可以是字符串，表示文件路径。其他参数默认即可。
      entries[name] = filepath
      也可以是对象，有更多的配置项，这里只用到 filename：指定打包后的 html 文件名称。
    */
    entries[name] = {
      entry: filepath,
      // filename 如果为 ''，其他文件会正常打包，但不会输出 html 文件！因为打包命令运行到处理 html 文件时会报错退出执行。
      filename: resolve('dist2/') + name + '.html'
    }
  })
  return entries
}

// 获取所有匹配src下目录的文件夹名字，其中文件夹里main.js为页面入口
const pages = getEntries('src/**/main.js')

module.exports = {
  pages,
}

3，打包结果

-- dist
   -- images
   -- js
      -- callback.js
      -- chunk-common.js
      -- chunk-vendors.js
      -- error.js
      -- index.js
-- dist2
   -- callback.html
   -- error.html
   -- index.html 

4，vue.config.js 完整配置

const glob = require('glob')
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

function getEntries(globPath) {
  const files = glob.sync(globPath), entries = {}
  files.forEach(function (filepath) {
    const split = filepath.split('/')
    const name = split[split.length - 2]
    entries[name] = {
      entry: filepath,
      filename: resolve('dist2/') + name + '.html'
    }
  })
  return entries
}

// 获取所有匹配src下目录的文件夹名字，其中文件夹里main.js为页面入口
const pages = getEntries('src/**/main.js')

module.exports = {
  publicPath: process.env.VUE_APP_PUBLIC_PATH, // 本地 '/' 其他 'CDN路径'
  pages,
  chainWebpack: (config) => {
    config.resolve.alias.set('@', resolve('src'))
  },
  css: {
    loaderOptions: {
      scss: {
        // 全局 scss 变量
        additionalData: `@import "@/styles/var.scss";`
      }
    }
  },
  devServer: {
    port: 8080,
    // 解决本地运行时，因为内网导致热更新失败的问题。
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws'
    },
    proxy: {
      '/cashier_core': {
        target: 'https://xxx.com.cn/',
        changeOrigin: true
      }
    }
  }
}

其他

设置更改 js 的打包路径（相对于 outputDir 目录（默认 dist ））。也可以通过指定 assetsdir 来实现。

chainWebpack: (config) => {
   config.output.set('filename', 'static/js/[name].[chunkhash].js')
},

---

以上。