vue打包多页面应用，使用 vue 2.6.11和vue-cli 4

ゝ一世哀愁。 2022-12-08 05:18 125阅读 0赞

vue打包多页面应用  
使用 vue 2.6.11和vue-cli 4  
项目目录中的`vuex`没有配置，在各个页面js中配置即可

## git地址：https://github.com/zshuai34/vue-pages ##

## 演示样式： ##

![在这里插入图片描述][20200918112520207.gif_pic_center]

## 项目目录 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70_pic_center]

## 打包后的目录 ##

![在这里插入图片描述][20200918113334257.png_pic_center]

项目地址：

[https://github.com/zshuai34/vue-pages][https_github.com_zshuai34_vue-pages]

## vue.config.js代码 ##

let path = require('path')
    let glob = require('glob') // 用于筛选文件
    
    // 工厂函数 - 配置pages实现多页面获取某文件夹下的html与js
    function handleEntry(entry) { 
      let entries = { }
      let entryBaseName = ''
      let entryPathName = ''
      let entryTemplate = ''
      // let applicationName = ''
    
      glob.sync(entry).forEach(item => { 
        console.log('!!!', item)
        entryBaseName = path.basename(item, path.extname(item))
        console.log('entryBaseName:', entryBaseName)
        entryTemplate = item.split('/').splice(-3)
        console.log('entryTemplate:', entryTemplate)
        entryPathName = entryBaseName // 正确输出js和html的路径
        console.log('entryPathName', entryPathName)
    
        entries[entryPathName] = { 
          entry: 'src/' + entryTemplate[0] + '/' + entryTemplate[1] + '/' + entryTemplate[1] + '.js',
          template: 'src/' + entryTemplate[0] + '/' + entryTemplate[1] + '/' + entryTemplate[2],
          title: entryTemplate[2],
          filename: entryTemplate[2]
        }
      })
    
      return entries
    }
    
    let pages = handleEntry('./src/views/**?/*.html')
    console.log(pages)
    
    // 以下开始配置
    module.exports = { 
      lintOnSave: false, // 关掉eslint
      publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
      productionSourceMap: false,
      // 入口设置
      pages,
      devServer: { 
        index: '/index.html', // 运行时，默认打开index页面
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false
        // 配置首页 入口链接
        // before: app => { 
        //   app.get('/', (req, res, next) => { 
        //     for (let i in pages) { 
        //       res.write(`<a target="_self" href="/${ i}">/${ i}</a></br>`);
        //     }
        //     res.end()
        //   });
        // }
      }
    }

[20200918112520207.gif_pic_center]: /images/20221123/5a899dade30b4651bc11dc10b90d2d43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/f6b9e01994da48bcb0ba27e466a8957d.png
[20200918113334257.png_pic_center]: /images/20221123/da13aa23a8a9479e84c2b99746a22b9f.png
[https_github.com_zshuai34_vue-pages]: https://github.com/zshuai34/vue-pages