vue项目一个页面接口很多怎么写_vue一个项目多入口打包的简单解决方案

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

下面我们开始：

项目是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: '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: '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文件路径都会发生变化

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

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

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

我们会发现，地址要写成这样才可以访问

只是一个参考，有需要这种的可以自行参考，这种的需要后台参与配合，我目前还没有成功，因为不知道怎么配置#号前面的东西

还有一个就是打包

npm run build

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

image.png

整个项目多页面改造过程就是这样，后续有改正会持续更新...