vue一个项目多入口打包的简单解决方案

2020-10-19 本文已影响0人颂温暖

项目需要，本来单页面的项目，要改成入口多页面，打包之后也是多页面，这就需要改造项目结构

下面我们开始：

项目是vue-cli3.0

需要改变的东西，先列出来

1.src目录结构

2.vue.config.js配置

3.页面间的图片，scss，main.js中的文件引用

1.我们先来看目录结构

image.png

项目修改之后的结构就这样，我就主要说下我这个项目吧

views目录下，分了两个小项目，index和mon
会先在views目录下创建这两个文件夹，然后复制main.js到这两个文件夹下，连带着app.vue也可以
然后把原先的项目拆分成两个，index项目的放到index下面，mon项目的放到mon下面
就保证每个子项目有main.js入口文件就可以了

然后结构改变之后，现在运行项目肯定会报错的

下面我们再来配置下vue.config.js就好了

配置如下：

'use strict'
const path = require('path')
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

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

module.exports = {
// 多页面入口配置pages
    pages: {
        index: {
          // page 的入口
          entry: 'src/views/index/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'index',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        mon: {
          // page 的入口
          entry: 'src/views/mon/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'mon.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'mon',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'projectB']
        }
    },
    productionSourceMap: false,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
    devServer: {
        // 设置代理
        proxy: {
            '/api': {
                target: 'http://XXX.com', // 域名
                changOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                secure: false,
                ws: false, // 是否启用websockets
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

看上面代码注释就能知道，其实主要的配置就是pages里面的东西
pages下面配置两个入口，index和mon

这时候，配置基本就算完成了
然后运行项目 npm run serve

这时候我们也知道，项目的结构变了，那么项目中引用的文件，图片，和scss文件路径都会发生变化

我们运行的时候会在终端直接报错提示，我们根据提示一步步都改了就好了，这个比较麻烦

全部改好之后，我们运行项目。http://192.168.0.162:8080/index或者http://192.168.0.162:8080/mon

就可以看到你想看的东西了

这里还有一点，我看网上的资料，先贴地址 https://blog.csdn.net/Hampton_Chen/article/details/88931567

这个文章的项目接口有些许变化，配置也会发生些许改变，可以参考下，这个配置好之后，运行

http://192.168.0.162:8080/index#/
http://192.168.0.162:8080/mon#/

我们会发现，地址要写成这样才可以访问
只是一个参考，有需要这种的可以自行参考，这种的需要后台参与配合，我目前还没有成功，因为不知道怎么配置#号前面的东西

还有一个就是打包

npm run build

打包之后文件接口是下图：