hello-world

├── babel.config.js ├── public └── favicon.ico ├── src ├── assets │ └── logo.png ├── pages │ ├── index │ │ ├── index.js │ │ ├── index.html │ │ └── index.vue │ └── ceshi2 │ │ ├── ceshi2.js │ │ ├── ceshi2.html │ │ └── ceshi2.vue └── components │ └── HelloWorld.vue ├── vue.config.js ├── .gitignore ├── README.md ├── util ├── getPages.js ├── htmlReplace.js ├── cssCopy.js └── jsCopy.js ├── server.js └── package.json /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seizeDev/vue-more-pages/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seizeDev/vue-more-pages/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/pages/index/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './index.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /src/pages/ceshi2/ceshi2.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './ceshi2.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | let pageMethod = require('./util/getPages.js'); 2 | pages = pageMethod.pages(); 3 | module.exports = { 4 | pages, 5 | publicPath: process.env.NODE_ENV === 'production' 6 | ? '/mydata/' 7 | : '/', 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist/* 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw* 21 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 17 | 33 | -------------------------------------------------------------------------------- /src/pages/ceshi2/ceshi2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | hello-world 9 | 10 | 11 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/pages/index/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | hello-world 9 | 10 | 11 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hello-world 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | 31 | 32 | 注意: 33 | 如果修改publicPath前面路径的话，需要对应修改util/htmlReplace.js 里面的 let regCss = new RegExp('/dist/css/' + name + '', 'g')；let regJs = new RegExp('/dist/js/' + name + '', 'g')；dist 改成对应的名字 34 | -------------------------------------------------------------------------------- /src/pages/ceshi2/ceshi2.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /util/getPages.js: -------------------------------------------------------------------------------- 1 | const glob = require('glob') 2 | let pages = {} 3 | module.exports.pages = function () { 4 | glob.sync('./src/pages/*/*.js').forEach(filepath => { 5 | let fileList = filepath.split('/') 6 | let fileName = fileList[fileList.length - 2] 7 | pages[fileName] = { 8 | entry: `src/pages/${fileName}/${fileName}.js`, 9 | // 模板来源 10 | template: `src/pages/${fileName}/${fileName}.html`, 11 | // 在 dist/index.html 的输出 12 | filename: process.env.NODE_ENV === 'development' ? `${fileName}.html` : `${fileName}/${fileName}.html`, 13 | // 提取出来的通用 chunk 和 vendor chunk。 14 | chunks: ['chunk-vendors', 'chunk-common', fileName] 15 | } 16 | }) 17 | return pages 18 | } 19 | -------------------------------------------------------------------------------- /src/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | 33 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | // 测试环境 2 | var TARGET = 'http://test.finlink.net.cn:3000/asset/backstage/'; 3 | 4 | var express = require('express'); 5 | var app = express(); 6 | var http = require('http'); 7 | var httpProxy = require('http-proxy'); 8 | var proxy = httpProxy.createProxyServer({}); 9 | 10 | http.globalAgent.maxSockets = 50; 11 | 12 | app.use(express.static('./dist/')); 13 | 14 | app.all('/asset/backstage/*', function (req, res, next) { 15 | console.log(req); 16 | return proxy.web(req, res, { target: TARGET }); 17 | // next(); 18 | }); 19 | 20 | app.get('/', function(req, res){ 21 | res.send('Hello cajl'); 22 | }); 23 | 24 | app.listen(8070, function(err) { 25 | if(err) { 26 | throw err; 27 | return; 28 | } 29 | console.log('已成功监听8070端口。') 30 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve --open ", 7 | "build": "vue-cli-service build && node util/jsCopy.js && node util/cssCopy.js && node util/htmlReplace.js", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "express": "^4.16.4", 12 | "vue": "^2.5.17" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.1.1", 16 | "@vue/cli-plugin-eslint": "^3.1.5", 17 | "@vue/cli-service": "^3.1.4", 18 | "@vue/eslint-config-standard": "^4.0.0", 19 | "babel-eslint": "^10.0.1", 20 | "eslint": "^5.8.0", 21 | "eslint-plugin-html": "^5.0.5", 22 | "eslint-plugin-vue": "^5.0.0-0", 23 | "vue-template-compiler": "^2.5.17" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended", 33 | "@vue/standard" 34 | ], 35 | "rules": {}, 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | } 39 | }, 40 | "postcss": { 41 | "plugins": { 42 | "autoprefixer": {} 43 | } 44 | }, 45 | "browserslist": [ 46 | "> 1%", 47 | "last 2 versions", 48 | "not ie <= 8" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /util/htmlReplace.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | const glob = require('glob') 3 | /** 4 | * html文件替换 5 | * @param src 6 | * @param dst 7 | */ 8 | var callbackFile = function (src, dst, name, filepath) { 9 | fs.readFile(src, 'utf8', function (error, data) { 10 | if (error) { 11 | // eslint-disable-next-line no-console 12 | console.log(error) 13 | return false 14 | } 15 | let regCss = new RegExp('/dist/css/' + name + '', 'g') 16 | let regJs = new RegExp('/dist/js/' + name + '', 'g') 17 | let htmlContent = data.toString().replace(regCss, `./css/${name}`).replace(regJs, `./js/${name}`) 18 | fs.writeFile(dst, htmlContent, 'utf8', function (error) { 19 | if (error) { 20 | // eslint-disable-next-line no-console 21 | console.log(error) 22 | return false 23 | } 24 | // console.log('html重新写入成功') 25 | if (src.indexOf('/index.html') === -1) { 26 | fs.unlink(src, function () { 27 | // console.log('html删除成功') 28 | }) 29 | } 30 | fs.unlink(filepath, function () { // css删除成功 31 | }) 32 | fs.unlink(filepath + '.map', function () { // css删除成功 33 | }) 34 | }) 35 | }) 36 | } 37 | // 复制目录 38 | glob.sync('./dist/js/*.js').forEach((filepath, name) => { 39 | let fileNameList = filepath.split('.') 40 | let fileName = fileNameList[1].split('/')[3]// 多页面页面目录 41 | let thisDirectory = `./dist/${fileName}/${fileName}.html`// 多页面JS文件地存放址 42 | let changeDirectory = `./dist/${fileName}/index.html`// 多页面JS文件地存放址 43 | if (!fileName.includes('chunk-vendors')) { 44 | callbackFile(thisDirectory, changeDirectory, fileName, filepath) 45 | } 46 | }) 47 | -------------------------------------------------------------------------------- /util/cssCopy.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | const glob = require('glob') 3 | /** 4 | * css文件拷贝 5 | * @param src 6 | * @param dst 7 | */ 8 | var callbackFile = function (src, dst) { 9 | fs.readFile(src, 'utf8', function (error, data) { 10 | if (error) { 11 | // eslint-disable-next-line no-console 12 | console.log(error) 13 | return false 14 | } 15 | let regImage = new RegExp('../img/', 'g'); 16 | let cssContent = data.toString().replace(regImage, `../../img/`); 17 | fs.writeFile(dst, cssContent, 'utf8', function (error) { 18 | if (error) { 19 | // eslint-disable-next-line no-console 20 | console.log(error) 21 | PromiseRejectionEvent(error) 22 | return false 23 | } 24 | // console.log('CSS写入成功') 25 | fs.unlink(src, function () { // css删除成功 26 | }) 27 | }) 28 | }) 29 | } 30 | // 复制目录 31 | glob.sync('./dist/css/*.css').forEach((filepath, name) => { 32 | let fileNameList = filepath.split('.') 33 | let fileName = fileNameList[1].split('/')[3]// 多页面页面目录 34 | let copyName = filepath.split('/')[3] 35 | let changeDirectory = `./dist/${fileName}/css`// 多页面JS文件地存放址 36 | if (!fileName.includes('chunk-vendors')) { 37 | /* eslint-disable-next-line */ 38 | fs.exists(changeDirectory, function (exists) { 39 | if (exists) { 40 | // console.log(`${fileName}下CSS文件已经存在`) 41 | callbackFile(filepath, `${changeDirectory}/${copyName}`) 42 | } else { 43 | fs.mkdir(changeDirectory, function () { 44 | callbackFile(filepath, `${changeDirectory}/${copyName}`) 45 | // console.log(`${fileName}下CSS文件创建成功`) 46 | }) 47 | } 48 | }) 49 | } 50 | }) 51 | -------------------------------------------------------------------------------- /util/jsCopy.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | const glob = require('glob') 3 | /** 4 | * JS文件拷贝 5 | * @param src 6 | * @param dst 7 | */ 8 | var callbackFile = function (src, dst) { 9 | fs.readFile(src, 'utf8', function (error, data) { 10 | if (error) { 11 | // eslint-disable-next-line no-console 12 | console.log(error) 13 | return false 14 | } 15 | fs.writeFile(dst, data.toString(), 'utf8', function (error) { 16 | if (error) { 17 | // eslint-disable-next-line no-console 18 | console.log(error) 19 | return false 20 | } 21 | if (dst.includes('.map')) { 22 | // let srcName = src.split('/')[4] 23 | // fs.unlink(`./dist/js/${srcName}.map`,function () { // 删除map 24 | // }) 25 | // fs.unlink(`./dist/js/${srcName}`,function () { // 删除js 26 | // }) 27 | } else { // JS写入成功 28 | callbackFile(dst, `${dst}.map`) 29 | } 30 | }) 31 | }) 32 | } 33 | // 复制目录 34 | glob.sync('./dist/js/*.js').forEach((filepath, name) => { 35 | let fileNameList = filepath.split('.') 36 | let fileName = fileNameList[1].split('/')[3]// 多页面页面目录 37 | let copyName = filepath.split('/')[3] 38 | let changeDirectory = `./dist/${fileName}/js`// 多页面JS文件地存放址 39 | if (!fileName.includes('chunk-vendors')) { 40 | // eslint-disable-next-line 41 | fs.exists(changeDirectory, function (exists) { 42 | if (exists) { 43 | // console.log(`${fileName}下JS文件已经存在`) 44 | callbackFile(filepath, `${changeDirectory}/${copyName}`) 45 | } else { 46 | fs.mkdir(changeDirectory, function () { 47 | callbackFile(filepath, `${changeDirectory}/${copyName}`) 48 | // console.log(`${fileName}下JS文件创建成功`) 49 | }) 50 | } 51 | }) 52 | } 53 | }) 54 | --------------------------------------------------------------------------------

{{ msg }}