Vue编写的html如何自动化,vue多页面自动化编译

基于vue-cli3的自动化多页面模板,在网上资源文章及自己需求的推动下,可以各页面独立资源分文件夹编译和原生所有资源统一编译.

正文

大家可以直接使用我改好的初始模板.

自己搭建

创建自动化脚本

在项目根目录创建script文件夹,里面创建两个文件splitBuild.js和getPages.js.

getPages.js

// getPages.js 自动获取目录结构

const glob = require('glob')

let pages = {}

module.exports.pages = function () {

glob.sync('./src/pages/*/*.js').forEach(filepath => {

let fileList = filepath.split('/')

let fileName = fileList[fileList.length - 2]

pages[fileName] = {

entry: `src/pages/${fileName}/${fileName}.js`,

// 模板来源

template: `src/pages/${fileName}/${fileName}.html`,

// 在 dist/index.html 的输出

filename: process.env.VUE_APP_TITLE !== 'ps' ? `${fileName}.html` : `${fileName}/${fileName}.html`,

// 提取出来的通用 chunk 和 vendor chunk。

chunks: ['chunk-vendors', 'chunk-common', fileName]

}

})

return pages

}

splitBuild.js

// splitBuild.js 分开编译资源处理脚本

var fs = require('fs')

const glob = require('glob')

const config = require('../vue.config.js')

const publicPath = config.publicPath || ''

const outputDir = config.outputDir || 'dist'

/**

* js文件copy

* @param src

* @param dst

*/

var callbackFileJs = function (src, dst) {

fs.readFile(src, 'utf8', function (error, data) {

if (error) {

// eslint-disable-next-line no-console

console.log(error)

return false

}

fs.writeFile(dst, data.toString(), 'utf8', function (error) {

if (error) {

// eslint-disable-next-line no-console

console.log(error)

return false

}

if (dst.includes('.map')) {

// let srcName = src.split('/')[4]

// fs.unlink(`./${outputDir}/js/${srcName}.map`,function () { // 删除map

// })

// fs.unlink(`./${outputDir}/js/${srcName}`,function () { // 删除js

// })

} else { // JS写入成功

callbackFileJs(dst, `${dst}.map`)

}

})

})

}

// 复制目录

glob.sync(`./${outputDir}/js/*.js`).forEach((filepath, name) => {

let fileNameList = filepath.split('.')

let fileName = fileNameList[1].split('/')[3]// 多页面页面目录

let copyName = filepath.split('/')[3]

let changeDirectory = `./${outputDir}/${fileName}/js`// 多页面JS文件地存放址

if (!fileName.includes('chunk-')) {

// eslint-disable-next-line

fs.exists(changeDirectory, function (exists) {

if (exists) {

// console.log(`${fileName}下JS文件已经存在`)

callbackFileJs(filepath, `${changeDirectory}/${copyName}`)

} else {

fs.mkdir(changeDirectory, function () {

callbackFileJs(filepath, `${changeDirectory}/${copyName}`)

// console.log(`${fileName}下JS文件创建成功`)

})

}

})

}

})

/**

* css文件拷贝

* @param src

* @param dst

*/

var callbackFileCss = function (src, dst) {

fs.readFile(src, 'utf8', function (error, data) {

if (error) {

// eslint-disable-next-line no-console

console.log(error)

return false

}

fs.writeFile(dst, data.toString(), 'utf8', function (error) {

if (error) {

// eslint-disable-next-line no-console

console.log(error)

PromiseRejectionEvent(error)

return false

}

// console.log('CSS写入成功')

fs.unlink(src, function () { // css删除成功

})

})

})

}

// 复制目录

glob.sync(`./${outputDir}/css/*.css`).forEach((filepath, name) => {

let fileNameList = filepath.split('.')

let fileName = fileNameList[1].split('/')[3]// 多页面页面目录

let copyName = filepath.split('/')[3]

let changeDirectory = `./${outputDir}/${fileName}/css`// 多页面JS文件地存放址

if (!fileName.includes('chunk-')) {

/* eslint-disable-next-line */

fs.exists(changeDirectory, function (exists) {

if (exists) {

// console.log(`${fileName}下CSS文件已经存在`)

callbackFileCss(filepath, `${changeDirectory}/${copyName}`)

} else {

fs.mkdir(changeDirectory, function () {

callbackFileCss(filepath, `${changeDirectory}/${copyName}`)

// console.log(`${fileName}下CSS文件创建成功`)

})

}

})

}

})

/**

* html文件替换

* @param src

* @param dst

*/

var callbackFile = function (src, dst, name, filepath) {

const index = publicPath.lastIndexOf('/')

let pt = publicPath

if (index !== -1) {

const count = publicPath.length

if (index + 1 === count) {

pt = publicPath.slice(0, index - 1)

}

}

fs.readFile(src, 'utf8', function (error, data) {

if (error) {

// eslint-disable-next-line no-console

console.log(error)

return false

}

let regCss = new RegExp(pt + '/css/' + name + '', 'g')

let regJs = new RegExp(pt + '/js/' + name + '', 'g')

let htmlContent = data.toString().replace(regCss, `./css/${name}`).replace(regJs, `./js/${name}`)

fs.writeFile(dst, htmlContent, 'utf8', function (error) {

if (error) {

// eslint-disable-next-line no-console

console.log(error)

return false

}

// console.log('html重新写入成功')

if (src.indexOf('/index.html') === -1) {

fs.unlink(src, function () {

// console.log('html删除成功')

})

}

fs.unlink(filepath, function () { // css删除成功

})

fs.unlink(filepath + '.map', function () { // css删除成功

})

})

})

}

// 复制目录

glob.sync(`./${outputDir}/js/*.js`).forEach((filepath, name) => {

let fileNameList = filepath.split('.')

let fileName = fileNameList[1].split('/')[3]// 多页面页面目录

let thisDirectory = `./${outputDir}/${fileName}/${fileName}.html`// 多页面JS文件地存放址

let changeDirectory = `./${outputDir}/${fileName}/index.html`// 多页面JS文件地存放址

if (!fileName.includes('chunk-')) {

callbackFile(thisDirectory, changeDirectory, fileName, filepath)

}

})

config配置

// vue.config.js

let pageMethod = require('./script/getPages.js')

const pages = pageMethod.pages()

// build-s编译不能将publicPath设置为'./'或'',会导致相对路径资源路径混乱

module.exports = {

pages,

publicPath: '/',

outputDir: 'dist'

}

package.json

{

...

"scripts": {

"serve": "vue-cli-service serve --open ",

"build-s": "vue-cli-service build --mode ps && node script/splitBuild.js",

"build": "vue-cli-service build",

...

},

...

}

使用说明

在src中创建pages文件夹

title

pages中创建的每一个文件夹就是一个单页面目录

title

我们在对应单页面目录里创建对应html,vue及js文件即可.

title

// html 就是页面的初始html(传统项目一般在public里面)

hello-world

We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.

// js文件 项目初始化js

import Vue from 'vue'

import App from './index.vue'

Vue.config.productionTip = false

new Vue({

render: h => h(App)

}).$mount('#app')

页面2URL：http://localhost:8080/index2/

// vue主页面

export default {

name: 'app'

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

不足之处,欢迎访问DLLCN的学习笔记进行批评与讨论,一起成长,一起学习.