vue 多页面应用例子_vue.js + webpack 多页面实例应用,无法访问到页面

这是我的webpack.base.conf.js配置

var path = require(‘path’)

var utils = require(’./utils’)

var config = require(’…/config’)

var vueLoaderConfig = require(’./vue-loader.conf’)

var glob = require(‘glob’)

var entries = getEntry(’./src/module/**/*.js’)

function resolve(dir) {

return path.join(__dirname, ‘…’, dir)

}

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;

});

return entries;

}

module.exports = {

entry: 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: [

{

test: /.(js|vue)$/,

loader: ‘eslint-loader’,

enforce: “pre”,

include: [resolve(‘src’), resolve(‘test’)],

options: {

formatter: require(‘eslint-friendly-formatter’)

}

},

{

test: /.vue$/,

loader: ‘vue-loader’,

options: vueLoaderConfig

},

{

test: /.js$/,

loader: ‘babel-loader’,

include: [resolve(‘src’), resolve(‘test’)]

},

{

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

loader: ‘url-loader’,

query: {

limit: 10000,

name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)

}

},

{

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

loader: ‘url-loader’,

query: {

limit: 10000,

name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)

}

}

]

}

}

这是我的webpack.dev.conf.js配置

var utils = require(’./utils’)

var path = require(‘path’)

var glob = require(‘glob’)

var webpack = require(‘webpack’)

var config = require(’…/config’)

var merge = require(‘webpack-merge’)

var baseWebpackConfig = require(’./webpack.base.conf’)

var HtmlWebpackPlugin = require(‘html-webpack-plugin’)

var FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin’)

// 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: {

rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap})

},

// cheap-module-eval-source-map is faster for development

devtool: ‘#cheap-module-eval-source-map’,

plugins: [

new webpack.DefinePlugin({

‘process.env’: config.dev.env

}),

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

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin(),

new FriendlyErrorsPlugin()

]

})

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;

});

return entries;

}

var pages = getEntry(’./src/module/**/*.html’);

for (var pathname in pages) {

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

var conf = {

filename: pathname + ‘.html’,

template: pages[pathname], // 模板路径

inject: true // js插入位置

};

if (pathname in module.exports.entry) {

conf.chunks = [‘vendors’, pathname];

conf.hash = true;

}

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

}

总是报

Cannot GET /module/index/index.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值