Многостраничный входной подарочный пакет конфигурации VUE.CLI 4.0 для вас!

Vue.js
Многостраничный входной подарочный пакет конфигурации VUE.CLI 4.0 для вас!

Зачем мне нужно настраивать несколько страниц?

В реальной работе вы обязательно столкнетесь с масштабными проектами, часто в одной архитектуре будет разрабатываться несколько приложений, и эти приложения не слишком связаны между собой, но могут иметь общие компоненты или таблицы стилей и т. д., тогда будет Проблема, при упаковке все эти несвязанные приложения будут запакованы.

Из-за скаффолдинга VueCli созданный проект представляет собой одностраничное приложение, поэтому нам нужно настроить его вручную для создания системы с несколькими входами и несколькими приложениями.

нужно

  • На домашней странице отображается название каждого приложения, нажмите, чтобы войти в соответствующее приложение.

выполнить

Создайте проект vue, используя vue/cli

npm install -g @vue/cliЛично не рекомендуется устанавливать напрямую глобально, потому что это может повлиять на другие проекты, поэтому я предпочитаю добавлять-Dустановить локально

потомvue create project-name(Если вы используете локальную установку, не забудьте добавитьnpx)

После успешного создания посмотрим на текущую структуру каталогов

Здесь нам нужно реорганизовать наш каталог, чтобы сделать его более впечатляющим.

Настроить 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/applications/**?/*.html')
console.log(pages)

// 以下开始配置
module.exports = {
    lintOnSave: false, // 关掉eslint
    /**
     * baseUrl 从 3.3起废用，使用pubilcPath代替
     * 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
     * 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。
     */
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    productionSourceMap: false,
    // 入口设置
    pages,
    devServer: {
        index: '/', // 运行时，默认打开application1页面
        // 告诉dev-server在服务器启动后打开浏览器，将其设置true为打开默认浏览器
        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()
            });
        }
    }
}

application1.js
import Vue from 'vue'
import Application1 from './application1.vue'
import router from './router'
import store from './vuex'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(Application1)
}).$mount('#app')

application1.vue

<template>
  <div id="app">
      <a class='tips' href='application2.html'>
        Hello Im Application1,Clike me can go to Application2
      </a>
  </div>
</template>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.tips{
    display: flex;
    justify-content: center;
    align-items:center;
    color:lightsalmon;
    font-size:20px;
    font-weight:bold;
}

</style>

application1.html

<!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 %>favicon.ico">
    <title>Application1</title>
</head>

<body>
    <noscript>
      <strong>We're sorry but test-my-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

Точно так же приложение application2 настроено так

бегать

npm run serve

Публичный аккаунт WeChat: THROWERROR

GITHUB

Категории