vue 多页面 php,vue 多入口文件搭建 vue多页面搭建的实例讲解

素颜马尾好姑娘i 2023-01-19 04:48 100阅读 0赞

下面我就为大家分享一篇vue 多入口文件搭建 vue多页面搭建的实例讲解，具有很好的参考价值，希望对大家有所帮助。

红色为更改后的不同之处

![f4ec459faefd19467a833729614701df.png][]

vue 多入口文件搭建

在webpack.base.conf

中修改

var

path = require('path')

var

config = require('../config')

var

utils = require('./utils')

var

projectRoot =

path.resolve(\_\_dirname,'../')

var glob = require('glob');

var entries = getEntry('./src/module/\*.js'); // 获得入口js文件

module.exports = \{

entry: entries,

output: \{

path:config.build.assetsRoot,

publicPath:process.env.NODE\_ENV

==='production' ?

config.build.assetsPublicPath :config.dev.assetsPublicPath,

filename: '\[name\].js'

\},

resolve: \{

extensions: \['','.js',

'.vue'\],

fallback: \[path.join(\_\_dirname,'../node\_modules')\],

alias: \{

'src':path.resolve(\_\_dirname,'../src'),

'assets':path.resolve(\_\_dirname,'../src/assets'),

'components':path.resolve(\_\_dirname,'../src/components')

\},

resolveLoader: \{

fallback: \[path.join(\_\_dirname,'../node\_modules')\]

\},

module: \{

loaders: \[

test: /\\.vue$/,

loader:'vue'

\},

test: /\\.js$/,

loader:'babel',

include:projectRoot,

\},

test: /\\.json$/,

loader:'json'

\},

test: /\\.html$/,

loader:'vue-html'

\},

test: /\\.(png|jpe?g|gif|svg)(\\?.\*)?$/,

loader:'url',

query: \{

limit:10000,

name:utils.assetsPath('img/\[name\].\[hash:7\].\[ext\]')

\},

test: /\\.(woff2?|eot|ttf|otf)(\\?.\*)?$/,

loader:'url',

query: \{

limit:10000,

name:utils.assetsPath('fonts/\[name\].\[hash:7\].\[ext\]')

\},

vue: \{

loaders:utils.cssLoaders()

function getEntry(globPath) \{

var entries = \{\},

basename, tmp, pathname;

glob.sync(globPath).forEach(function (entry) \{

basename = path.basename(entry, path.extname(entry));

console.log(1,basename);

tmp = entry.split('/').splice(-3);

console.log(2,tmp);

pathname = basename; // 正确输出js和html的路径

console.log(3,pathname);

entries\[pathname\] = entry;

console.log(4,entry);

\});

console.log("base-entrys:");

console.log(5,entries);

return entries;

![f720d314fdb6eff6bc79a97879e8f8aa.png][]

这样一来的话，就在中细分，最后输出html都在dist下。

这里的字符串操作也是和路径的情况相匹配的，如果有需要进行其他方式的设定，注意在这里修改路径的识别。

vue多页面搭建

![702e75f117e2b262f95abd25143d6ebc.png][]

原本的webpack.dev.conf中有一个插件的设置内容

对这部分内容进行修改

![b7d8a6e0b2dcb559da813fdd250dba1d.png][]

var

config = require('../config')

var

webpack = require('webpack')

var

merge = require('webpack-merge')

var

utils = require('./utils')

var

baseWebpackConfig =

require('./webpack.base.conf')

var

HtmlWebpackPlugin =

require('html-webpack-plugin')

var path = require('path');

var glob = require('glob');

// add hot-reload related code to entry chunks

Object.keys(baseWebpackConfig.entry).forEach(function

(name) \{

baseWebpackConfig.entry\[name\] = \['./build/dev-client'\].concat(baseWebpackConfig.entry\[name\])

\})

module.exports =merge(baseWebpackConfig,

module: \{

loaders:

utils.styleLoaders(\{

sourceMap: config.dev.cssSourceMap \})

\},

// eval-source-map is faster for development

devtool:

'\#eval-source-map',

plugins: \[

new

webpack.DefinePlugin(\{

'process.env':config.dev.env

\}),

// https://github.com/glenjamin/webpack-hot-middleware\#installation--usage

new

webpack.optimize.OccurenceOrderPlugin(),

new

webpack.HotModuleReplacementPlugin(),

new

webpack.NoErrorsPlugin(),

// https://github.com/ampedandwired/html-webpack-plugin

\})

function getEntry(globPath) \{

var entries = \{\},

basename, tmp, pathname;

glob.sync(globPath).forEach(function(entry) \{

basename = path.basename(entry, path.extname(entry));

tmp = entry.split('/').splice(-3);

pathname = basename; // 正确输出js和html的路径

entries\[pathname\] = entry;

\});

console.log("dev-entrys:");

console.log(entries);

return entries;

var pages = getEntry('./pages/\*.html');

console.log("dev pages----------------------");

for (var pathname in pages) \{

console.log("filename:" + pathname + '.html');

console.log("template:" + pages\[pathname\]);

// 配置生成的html文件，定义路径等

var conf = \{

filename: pathname + '.html',

minify: \{ //传递 html-minifier 选项给 minify 输出

removeComments: true

\},

inject: 'body', // js插入位置

chunks: \[pathname, "vendor", "manifest"\] // 每个html引用的js模块，也可以在这里加上vendor等公用模块

\};

// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象

module.exports.plugins.push(new HtmlWebpackPlugin(conf));

\----------------------------------------------

webpack.prod.conf配置

和webpack.dev.conf.js中做类似的处理，

先注释掉原来的HtmlWebpackPlugin，然后在下面添加函数，

通过迭代插入多个HtmlWebpackPlugin。

var

path =require('path')

var

config =require('../config')

var

utils =require('./utils')

var

webpack =require('webpack')

var

merge =require('webpack-merge')

var

baseWebpackConfig =require('./webpack.base.conf')

var

ExtractTextPlugin =require('extract-text-webpack-plugin')

var

HtmlWebpackPlugin =require('html-webpack-plugin')

var

env =process.env.NODE\_ENV ==='testing'

require('../config/test.env')

config.build.env

var

glob =require('glob');

module.exports =merge(baseWebpackConfig,

module: \{

loaders:

utils.styleLoaders(\{sourceMap:

config.build.productionSourceMap,extract:

true \})

\},

devtool:

config.build.productionSourceMap ?'\#source-map' :

false,

output: \{

path:

config.build.assetsRoot,

filename:

utils.assetsPath('js/\[name\].\[chunkhash\].js'),

chunkFilename:

utils.assetsPath('js/\[id\].\[chunkhash\].js')

\},

vue: \{

loaders:

utils.cssLoaders(\{

sourceMap:

config.build.productionSourceMap,

extract:

true

\})

\},

plugins: \[

// http://vuejs.github.io/vue-loader/workflow/production.html

new

webpack.DefinePlugin(\{

'process.env':env

\}),

new

webpack.optimize.UglifyJsPlugin(\{

compress: \{

warnings:

false

\}),

new

webpack.optimize.OccurenceOrderPlugin(),

// extract css into its own file

new

ExtractTextPlugin(utils.assetsPath('css/\[name\].\[contenthash\].css')),

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

// \}),

// split vendor js into its own file

new

webpack.optimize.CommonsChunkPlugin(\{

name:

'vendor',

minChunks:

function (module,count) \{

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

) ===

)

\}),

// 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',

chunks: \['vendor'\]

\})

if (config.build.productionGzip)

var

CompressionWebpackPlugin =require('compression-webpack-plugin')

webpackConfig.plugins.push(

new

CompressionWebpackPlugin(\{

asset:

'\[path\].gz\[query\]',

algorithm:

'gzip',

test:

newRegExp(

'\\\\.(' +

config.build.productionGzipExtensions.join('|')

')$'

threshold:

10240,

minRatio:

0.8

\})

)

function getEntry(globPath) \{

var entries = \{\},

basename, tmp,pathname;

glob.sync(globPath).forEach(function (entry) \{

basename = path.basename(entry,path.extname(entry));

tmp = entry.split('/').splice(-3);

pathname = tmp.splice(0,1) + '/' + basename; // 正确输出js和html的路径

entries\[pathname\] =entry;

\});

console.log("prod-entrys:");

console.log(entries);

return entries;

var pages =getEntry('./pages/\*.html');

console.log("prod pages-----");

for (varpathname inpages) \{

console.log("filename:"+pathname +'.html');

console.log("template:"+pages\[pathname\]);

// 配置生成的html文件，定义路径等

var conf = \{

filename: pathname +'.html',

minify:\{ //

removeComments:true,

collapseWhitespace: false

\},

inject: true,// js插入位置

chunks: \[pathname,"vendor", "manifest"\]// 每个html引用的js模块，也可以在这里加上vendor等公用模块

\};

// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象

module.exports.plugins.push(newHtmlWebpackPlugin(conf));

上面是我整理给大家的，希望今后会对大家有帮助。

[f4ec459faefd19467a833729614701df.png]: /images/20221021/4c53ff10607442f8a42b04e0d0bdc0bd.png
[f720d314fdb6eff6bc79a97879e8f8aa.png]: /images/20221021/da98d6cee329433297ccc0dc292d7355.png
[702e75f117e2b262f95abd25143d6ebc.png]: /images/20221021/fd1d4e491875448eaecac006e14f3ed6.png
[b7d8a6e0b2dcb559da813fdd250dba1d.png]: /images/20221021/daf8686eb8b44312a9bb2414403dfb56.png