vue-cli4 配置多页应用入坑详解
前言
最近在开发跨境电商项目的时候，要做一个广告宣传页，根据产品的要求希望广告宣传页面在独立域名下，但是领导又希望这个页面在原有的项目内，于是就想起了用vue-cli多页应用。接下来就详细介绍配置多页应用中遇到的坑和注意的细节。
step 一：首先看一下项目的主体架构,下边讲解不懂得可以参考这个目录结构
step 二：主要讲解一下多页应用的主要配置
1,你可以使用原有的main.js和App.vue作为主页面的入口，原有的项目不需要动
2,然后其他的多个页面就需要自己创建了，在src目录下创建pages目录下，然后新建advertisingPage目录，这里边就是你的第一个多页的配置。
advertisingPage.js的配置如下,说白了就是你当前新建的多页的路由入口，类似于主页的main.js
注意：这里的#advertisingPage就是下边相对应个vue文件的id,就跟app.vue中的id一样，但是有时候粗心就会导致这个地方写错，所以要切记。
import Vue from "vue";
import advertisingPage from "./advertisingpage.vue";
import router from "../../router/adverTising.js";
import '@/assets/styles/index.scss'
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(advertisingPage)
}).$mount("#advertisingPage");
advertisingPage.vue就是你多页的入口文件，类似于主页的App.vue文件
这里需要注意的是，如果多个页面的路由模式都用的是history模式，那么（就目前我自己的配置情况）只有主页
但是hash模式时正常的，目前history模式我还不知道怎么配置，不过还可以加载组件，然后在组建内做点击跳转。
肯定会有人说是因为我路由里边写的错误，后边会有我路由的详细配置，一看便明白。
<template>
<div id="advertisingPage">
<!-- 注意：这个副页面就是上边所说的，直接用他进路由是没有效果的， -->
<!-- <router-view /> -->
<propaganda></propaganda>
</div>
</template>
<script>
import propaganda from "../../views/SeiteWerbung";
export default {
components: {
propaganda,
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
</style>
3,主要的配置就是在vue.config.js里边
这里边的pages目录下就是配置的多页的基本配置，需要几个就配置几个，但是项目中要有配套的页面，里边都有详细的注释，注意看就好了
友情提示：这里进入history模式刷新页面404的小伙伴，请移步vue history模式刷新页面进入404解决方案
module.exports = {
publicPath: './', //部署项目的时候的基本url,替代原来的Baseurl,默认是'/'
outputDir: 'dist', //运行npm run build 时的打包文件夹
assetsDir: '', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
indexPath: 'index.html', //指定生成的index.html输出路径
pages: {
advertisingPage: {
entry: "src/pages/advertisingPage/advertisingpage.js",
template: "public/advertisingPage.html",
filename: "advertisingPage.html",
title: "广告宣传页面",
},
// homePage: {
// entry: "src/pages/homePage/homepage.js",
// template: "public/homePage.html",
// filename: "index.html",
// title: "裹小递官网",
// },
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '裹小递',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
devServer: {
host: 'localhost', //请求路径
port: '8080', //请求端口，当同时运行多个项目时就需要配置这个端口
https: false,
hotOnly: true, //是否热更新
open: false, //是否自动启动浏览器
// history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
historyApiFallback: {
index: '/index.html', //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
},
},
}
4,然后就是public目录下的文件了，主要就是跟多页匹配的html页面
advertisingPage.html页面，这里主要注意的是里边入口id要跟多页应用的入口文件的id匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <link rel="icon" href="<%= BASE_URL %>logo.png"> -->
<!-- htmlWebpackPlugin.options.title 更改后的写法，在相应的vue.config.js中有说明 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
这里的id必须是`advertisingPage.vue`文件的容器的id,这里的内容切记不要忘记
<div id="advertisingPage"></div>
<!-- built files will be auto injected -->
</body>
</html>
5,最后咋router/advertisingPage.js里边配置对应的多页的路由
import Vue from "vue";
import VueRouter from "vue-router";
import home from "../views/advertising.vue";
Vue.use(VueRouter);
const routes = [{
path: "/",
name: "advertising",
component: advertising
},
];
这里的多页的history模式，就是上边所说的不能直接进入router-view进入跟路由，但是hash模式可以
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
step 三：运行项目并访问
1,访问main.js的主页面正常连接就可以访问
2,访问advertisingPage就需要在你的路径后边跟上advertisingPage.html
http://localhost:8080/advertisingPage.html
就是这样的路径，这样就可以访问到多页的那个副页面的路由了。
3,同属于一个单页面内的就可以正常使用vueRouter正常跳转，但是不属于同于一个单页内的应用的就需要用window.location.href或者secondview来跳转。
4,执行npm run build你就会在dist文件夹下发现多了你之前配置的多页相匹配的html文件。
