vue.js + webpack 多页面实例应用,无法访问到页面
发布于 8 年前 作者 hdw3389 3929 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

这是我的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

回到顶部