VUE 多页面项目脚手架2.0

最新推荐文章于 2024-05-14 05:12:02 发布

CoCo拓海

最新推荐文章于 2024-05-14 05:12:02 发布

阅读量637

点赞数

分类专栏：前端 npm Node.js 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/weixin_55230320/article/details/122522987

版权

Node.js 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

npm

3 篇文章 0 订阅

订阅专栏

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

前期准备

1、初始化脚手架项目

vue init webpack pages2.0

2、启动脚手架

 cd pages2.0
 npm run dev

配置多入口

1、utils.js文件

var glob = require('glob') // webpack安装时依赖的第三方模块，允许使用*等符号，例如pages/*.js => 获取pages文件夹下的所有js后缀名的文件
var HtmlWebpackPlugin = require('html-webpack-plugin') // webpack编译html的第三方插件
var PAGE_PATH = path.resolve(__dirname, '../src/pages') // 取得相应的页面路径 => src文件夹下的pages文件夹
var merge = require('webpack-merge') // 相应的merge处理

exports.entries = function () { // 多入口配置，通过glob模块读取pages文件夹下的所有js后缀名的文件，该文件存在就作为入口处理
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    var filename = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'))
    map[filename] = filePath
  })
  return map
}

exports.htmlPlugin = function () { // 多页面输出配置，读取pages文件夹下的对应的html后缀文件，存于数组中
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'))
    let conf = {
      template: filePath, // 模板来源
      filename: filename + '.html', // 文件名称
      // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
      chunks: ['manifest', 'vendor', filename],
      inject: true
    }
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

2、webpack.base.conf.js文件
单入口配置 => 配置多入口

// 仅修改一处 单入口=>多入口
entry: utils.entries(),

3、webpack.dev.conf.js文件
单页面输出配置 => 多页面输出配置

// 注释或删除该语句
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

// plugins数组后添加
.concat(utils.htmlPlugin())

4、webpack.prod.conf.js文件
单页面输出配置 => 多页面输出配置

// 注释或删除该语句
new HtmlWebpackPlugin({
   filename: process.env.NODE_ENV === 'testing'
     ? 'index.html'
     : config.build.index,
   template: 'index.html',
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
     // more options:
     // https://github.com/kangax/html-minifier#options-quick-reference
   },
   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
   chunksSortMode: 'dependency'
 }),

// plugins数组后添加
.concat(utils.htmlPlugin())

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

1、原文件结构
请添加图片描述
2、文件结构调整
2.1、src下新建pages文件夹，pages文件夹下再新建index和login文件夹
2.2、将router文件夹、main.js、App.vue、index.html移至index文件夹
在这里插入图片描述
2.3、login文件夹下新建login.html、login.js、login.vue

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>login</title>
  </head>
  <body>
    <div id="login"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2）login.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Login from './login.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#login',
  components: { Login },
  template: '<Login/>'
})

3）login.vue

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

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

<style>
</style>

效果预览

在这里插入图片描述

CoCo拓海

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE 多页面项目脚手架2.0

VUE脚手架2.0创建多页面项目前期准备1、初始化脚手架项目vue init webpack pages2.02、启动脚手架 cd pages2.0 npm run dev配置多入口1、utils.js文件var glob = require('glob') // webpack安装时依赖的第三方模块，允许使用*等符号，例如pages/*.js => 获取pages文件夹下的所有js后缀名的文件var HtmlWebpackPlugin = require('html-webp
复制链接

扫一扫