VUE 多页面项目 脚手架3.0

VUE脚手架3.0 创建多页面项目

前期准备

1、初始化脚手架项目

vue create pages3.0

2、启动脚手架

$ cd pages3.0 
$ npm run serve

配置多入口

1、新建vue.config.js文件

'use strict'
const path = require('path')
const glob = require('glob')

const resolve = dir => {
  return path.join(__dirname, dir)
}

const getEntries = globPath => { // 获取多入口以及路由
  const entries = {}
  glob.sync(globPath).forEach(entry => {
    const basename = path.basename(entry, path.extname(entry), 'router.js')
    entries[basename] = entry
  })
  return entries
}
const pages = getEntries('./src/pages/*/*.js')
const getPages = pages => {  // 获取多页面
  const obj = {}
  for (const key in pages) {
    const page = pages[key]
    const pageName = page.substring(page.lastIndexOf('/') + 1, page.length - 3)
    obj[pageName] = {
      // 出来entry,其他都不是必填
      entry: page, // page 的入口,每个“page”应该有一个对应的 ‘*.js’ 入口文件
      // template: "public/index.html", // 模板来源
      // filename: pageName+".html", // 在 dist/index.html 的输出
      title: pageName // 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
      // chunks: ["chunk-vendors", "chunk-common", pageName] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    }
  }
  return obj
}

const port = 8080;
const baseUrl = 'http://localhost:3000'
const contextPath = '/fronted'
const dev = process.env.NODE_ENV === 'development'

module.exports = {
  publicPath: '/', // 静态资源的公开路径，也就是真正的引用路径
  outputDir: 'dist', // 打包的时候生成的一个文件名
  assetsDir: 'static',
  pages: getPages(pages),
  chainWebpack(config) {
    config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
  },
  lintOnSave: false,
  devServer: {
    // 环境配置
    host: '0.0.0.0', // 局域网允许访问修改为 host: "0.0.0.0"
    port,
    https: false,
    hotOnly: false,
    open: true, // 配置自动启动浏览器
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    proxy: {
      // 设置代理
      '/api': {
        target: baseUrl + contextPath,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: config => {
    // 去掉console
    // 判断为生产模式下，因为开发模式我们是想保存console的
    if (!dev) {
      config.optimization.minimizer.map((arg) => {
        const option = arg.options.terserOptions.compress
        option.drop_console = true // 打开开关
        return arg
      })
    }
    config.performance = {
      hints: 'warning',
      // 入口起点的最大体积 整数类型（以字节为单位）
      maxEntrypointSize: 50000000,
      // 生成文件的最大体积 整数类型（以字节为单位 300k）
      maxAssetSize: 30000000,
      // 只给出 js 文件的性能提示
      assetFilter(assetFilename) {
        return assetFilename.endsWith('.js')
      }
    }
    config.resolve.alias = {
      '@': resolve('src')
    }
  }
}

2、安装依赖

npm install html-loader@1.1.0 --save

更改文件目录以及页面配置

1、原文件结构

2、文件结构调整
2.1、src下新建pages文件夹，pages文件夹下再新建index和login文件夹
2.2、main.js、App.vue移至index文件夹

2.3、login文件夹下新建login.js、login.vue

2.4、1）调整资源引用路径；2）将main.js文件改名为index.js(以index.js为多页面应用的默认入口=>即http://localhost:8080的默认跳转页)

2.5、login页面设置
1）login.js

import Vue from 'vue'
import Login from './login.vue'

Vue.config.productionTip = false

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

2）login.vue

<template>
  <div id="app">
    {{ msg }}
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
      return {
        msg: 'login success'
      }
  }
}
</script>

<style>
</style>

效果预览