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

喜欢ヅ旅行 2022-10-05 10:53 280阅读 0赞

基于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文件夹

![0cb44fcb42a8][]

title

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

![0cb44fcb42a8][]

title

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

![0cb44fcb42a8][]

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')

![Vue logo][]

页面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的学习笔记进行批评与讨论,一起成长,一起学习.

[0cb44fcb42a8]: /images/20221005/fc2b31a5c07f4976a1c6118291168f5f.png
[Vue logo]:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关自动化脚本编写：Python如何实现任务自动化的示例？

相关自动化测试用例如何编写

相关页面自动化对比html,Web自动化页面样式检查尝试

相关 webpack 实现自动化多页面打包

相关 html页面下如何通过vue使用vue-awesome-swiper

相关 vue基础组件的自动化全局注册

相关 jenkins自动化部署vue

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

相关 vue 自动化部署 jenkins 篇

相关 jenkins自动化部署vue项目