vue-cli4 配置多頁應(yīng)用入坑詳解

前言

最近在開發(fā)跨境電商項(xiàng)目的時(shí)候，要做一個(gè)廣告宣傳頁，根據(jù)產(chǎn)品的要求希望廣告宣傳頁面在獨(dú)立域名下，但是領(lǐng)導(dǎo)又希望這個(gè)頁面在原有的項(xiàng)目內(nèi)，于是就想起了用vue-cli多頁應(yīng)用。接下來就詳細(xì)介紹配置多頁應(yīng)用中遇到的坑和注意的細(xì)節(jié)。

step 一：首先看一下項(xiàng)目的主體架構(gòu),下邊講解不懂得可以參考這個(gè)目錄結(jié)構(gòu)

project.png

step 二：主要講解一下多頁應(yīng)用的主要配置

  • 1,你可以使用原有的main.js和App.vue作為主頁面的入口，原有的項(xiàng)目不需要?jiǎng)?/li>
  • 2,然后其他的多個(gè)頁面就需要自己創(chuàng)建了，在src目錄下創(chuàng)建pages目錄下，然后新建advertisingPage目錄，這里邊就是你的第一個(gè)多頁的配置。

advertisingPage.js的配置如下,說白了就是你當(dāng)前新建的多頁的路由入口，類似于主頁的main.js

注意：這里的#advertisingPage就是下邊相對(duì)應(yīng)個(gè)vue文件的id,就跟app.vue中的id一樣，但是有時(shí)候粗心就會(huì)導(dǎo)致這個(gè)地方寫錯(cuò)，所以要切記。

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文件

這里需要注意的是，如果多個(gè)頁面的路由模式都用的是history模式，那么（就目前我自己的配置情況）只有主頁<router-view />可以正常直接進(jìn)入路由，副頁面是不可以的，所以在這里我采用了引入組件的方式，不過可以點(diǎn)擊跳轉(zhuǎn)路由。

但是hash模式時(shí)正常的，目前history模式我還不知道怎么配置，不過還可以加載組件，然后在組建內(nèi)做點(diǎn)擊跳轉(zhuǎn)。

肯定會(huì)有人說是因?yàn)槲衣酚衫镞厡懙腻e(cuò)誤，后邊會(huì)有我路由的詳細(xì)配置，一看便明白。

<template>
  <div id="advertisingPage">
            <!-- 注意：這個(gè)副頁面就是上邊所說的，直接用他進(jìn)路由是沒有效果的， -->
        <!-- <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目錄下就是配置的多頁的基本配置，需要幾個(gè)就配置幾個(gè)，但是項(xiàng)目中要有配套的頁面，里邊都有詳細(xì)的注釋，注意看就好了

友情提示：這里進(jìn)入history模式刷新頁面404的小伙伴，請(qǐng)移步vue history模式刷新頁面進(jìn)入404解決方案 
module.exports = {
    publicPath: './', //部署項(xiàng)目的時(shí)候的基本url,替代原來的Baseurl,默認(rèn)是'/'
    outputDir: 'dist', //運(yùn)行npm run build 時(shí)的打包文件夾
    assetsDir: '', //放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 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: "裹小遞官網(wǎng)",
        //   },
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板來源
            template: 'public/index.html',
            // 在 dist/index.html 的輸出
            filename: 'index.html',
            // 當(dāng)使用 title 選項(xiàng)時(shí)，
            // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '裹小遞',
            // 在這個(gè)頁面中包含的塊，默認(rèn)情況下會(huì)包含
            // 提取出來的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    },
    devServer: {
        host: 'localhost', //請(qǐng)求路徑
        port: '8080', //請(qǐng)求端口，當(dāng)同時(shí)運(yùn)行多個(gè)項(xiàng)目時(shí)就需要配置這個(gè)端口
        https: false,
        hotOnly: true, //是否熱更新
        open: false, //是否自動(dòng)啟動(dòng)瀏覽器
        // history模式下的url會(huì)請(qǐng)求到服務(wù)器端，但是服務(wù)器端并沒有這一個(gè)資源文件，就會(huì)返回404，所以需要配置這一項(xiàng)
        historyApiFallback: {
            index: '/index.html', //與output的publicPath有關(guān)(HTMLplugin生成的html默認(rèn)為index.html)
        },
    },
}
  • 4,然后就是public目錄下的文件了，主要就是跟多頁匹配的html頁面

advertisingPage.html頁面，這里主要注意的是里邊入口id要跟多頁應(yīng)用的入口文件的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 更改后的寫法，在相應(yīng)的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,這里的內(nèi)容切記不要忘記
  <div id="advertisingPage"></div>
  <!-- built files will be auto injected -->
</body>
</html>
  • 5,最后咋router/advertisingPage.js里邊配置對(duì)應(yīng)的多頁的路由
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模式，就是上邊所說的不能直接進(jìn)入`router-view`進(jìn)入跟路由，但是`hash`模式可以
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

step 三：運(yùn)行項(xiàng)目并訪問

  • 1,訪問main.js的主頁面正常連接就可以訪問
  • 2,訪問advertisingPage就需要在你的路徑后邊跟上advertisingPage.html

http://localhost:8080/advertisingPage.html
就是這樣的路徑，這樣就可以訪問到多頁的那個(gè)副頁面的路由了。

  • 3,同屬于一個(gè)單頁面內(nèi)的就可以正常使用vueRouter正常跳轉(zhuǎn)，但是不屬于同于一個(gè)單頁內(nèi)的應(yīng)用的就需要用window.location.href或者<a href="advertisingPage">secondview</a>來跳轉(zhuǎn)。
  • 4,執(zhí)行npm run build你就會(huì)在dist文件夾下發(fā)現(xiàn)多了你之前配置的多頁相匹配的html文件。

結(jié)束語

在配置多頁應(yīng)用的時(shí)候也是踩了好多坑，現(xiàn)在記錄下來，方便以后學(xué)習(xí)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容