vue配置多页面的实现方法
程序员文章站
2022-11-20 11:37:45
1.安装环境
①安装node.js 并添加入环境变量path
②安装淘宝npm镜像
$ npm install -g cnpm --registry=...
1.安装环境
①安装node.js 并添加入环境变量path
②安装淘宝npm镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
③安装webpack
npm install webpack -g
④安装vue-cli脚手架
npm install -g vue-cli
⑤创建项目模板 vue init wepack vue-multipage-demo
⑥cmd进入到要放项目的文件夹
⑦安装 cnpm install
2.目录结构调整
3.配置文件修改
①添加依赖 glob (返回目录中的所有子文件)
npm install glob
②修改build文件夹中的utils.js文件
//新增代码 var glob = require('glob'); // 页面模板 var htmlwebpackplugin = require('html-webpack-plugin'); // 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹 var page_path = path.resolve(__dirname, '../src/pages'); // 用于做相应的merge处理 var merge = require('webpack-merge'); //多入口配置 // 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在 // 那么就作为入口处理 exports.entries = function () { 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 } //多页面输出配置 // 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中 exports.htmlplugin = function () { 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 }
③修改webpack.base.conf.js文件
function resolve (dir) { return path.join(__dirname, '..', dir) } const createlintingrule = () => ({ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitwarning: !config.dev.showeslinterrorsinoverlay } }) module.exports = { context: path.resolve(__dirname, '../'), //注释代码开始 // entry: { // app: './src/main.js' // }, //注释代码结束 //新增代码开始 entry: utils.entries(), //新增代码结束 output: { path: config.build.assetsroot, filename: '[name].js', publicpath: process.env.node_env === 'production' ? config.build.assetspublicpath : config.dev.assetspublicpath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, module: { rules: [ ...(config.dev.useeslint ? [createlintingrule()] : []), { test: /\.vue$/, loader: 'vue-loader', options: vueloaderconfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetspath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetspath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetspath('fonts/[name].[hash:7].[ext]') } } ] }, node: { // prevent webpack from injecting useless setimmediate polyfill because vue // source contains it (although only uses it if it's native). setimmediate: false, // prevent webpack from injecting mocks to node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }
④修改webpack.dev.conf.js文件
plugins: [ new webpack.defineplugin({ 'process.env': require('../config/dev.env') }), new webpack.hotmodulereplacementplugin(), new webpack.namedmodulesplugin(), // hmr shows correct file names in console on update. new webpack.noemitonerrorsplugin(), // https://github.com/ampedandwired/html-webpack-plugin //多页面输出配置 //注释代码开始 // new htmlwebpackplugin({ // filename: 'index.html', // template: 'index.html', // inject: true // }), //注释代码结束 // copy custom static assets new copywebpackplugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetssubdirectory, ignore: ['.*'] } ]) //新增代码开始 ].concat(utils.htmlplugin()) //新增代码结束 })
⑤修改webpack.prod.conf.js文件
'use strict' const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const basewebpackconfig = require('./webpack.base.conf') const copywebpackplugin = require('copy-webpack-plugin') const htmlwebpackplugin = require('html-webpack-plugin') const extracttextplugin = require('extract-text-webpack-plugin') const optimizecssplugin = require('optimize-css-assets-webpack-plugin') const uglifyjsplugin = require('uglifyjs-webpack-plugin') const env = process.env.node_env === 'testing' ? require('../config/test.env') : require('../config/prod.env') const webpackconfig = merge(basewebpackconfig, { module: { rules: utils.styleloaders({ sourcemap: config.build.productionsourcemap, extract: true, usepostcss: true }) }, devtool: config.build.productionsourcemap ? config.build.devtool : false, output: { path: config.build.assetsroot, filename: utils.assetspath('js/[name].[chunkhash].js'), chunkfilename: utils.assetspath('js/[id].[chunkhash].js') }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.defineplugin({ 'process.env': env }), new uglifyjsplugin({ uglifyoptions: { compress: { warnings: false } }, sourcemap: config.build.productionsourcemap, parallel: true }), // extract css into its own file new extracttextplugin({ filename: utils.assetspath('css/[name].[contenthash].css'), // setting the following option to `false` will not extract css from codesplit chunks. // their css will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // it's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 allchunks: true, }), // compress extracted css. we are using this plugin so that possible // duplicated css from different components can be deduped. new optimizecssplugin({ cssprocessoroptions: config.build.productionsourcemap ? { safe: true, map: { inline: false } } : { safe: true } }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin //注释代码开始 // 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' // }), //注释代码结束 // keep module.id stable when vendor modules does not change new webpack.hashedmoduleidsplugin(), // enable scope hoisting new webpack.optimize.moduleconcatenationplugin(), // split vendor js into its own file new webpack.optimize.commonschunkplugin({ name: 'vendor', minchunks (module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexof( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.commonschunkplugin({ name: 'manifest', minchunks: infinity }), // this instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.commonschunkplugin({ name: 'app', async: 'vendor-async', children: true, minchunks: 3 }), // copy custom static assets new copywebpackplugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetssubdirectory, ignore: ['.*'] } ]) //修改代码开始 ].concat(utils.htmlplugin()) //修改代码结束 }) if (config.build.productiongzip) { const compressionwebpackplugin = require('compression-webpack-plugin') webpackconfig.plugins.push( new compressionwebpackplugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new regexp( '\\.(' + config.build.productiongzipextensions.join('|') + ')$' ), threshold: 10240, minratio: 0.8 }) ) } if (config.build.bundleanalyzerreport) { const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin webpackconfig.plugins.push(new bundleanalyzerplugin()) } module.exports = webpackconfig
多页面的配置完成 cnpm run dev
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。