vue写的多页面应用,打包后访问报错:Cannot read property 'call' of undefined

vue多页应用,在npm run build打包编译完成后,我想直接打开index.html文件查看页面,提示以下错误
图片描述
这个问题是在我新建vuex包 并 import store from '../../vuex/store'后报错,百度谷歌了后没找到合适的解决办法,觉得是webpack配置出了问题,希望能有人解惑一下
以下是代码:
webpack.base.conf.js:

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var glob = require('glob')
var autoprefixer = require('autoprefixer')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

var projectRoot = path.resolve(__dirname, '../')
var srcDir = path.resolve(__dirname, '../src')
var entries = getEntry(srcDir + '/module/**/*.js')

var autoprefixerConf = autoprefixer({ browsers: ['last 2 versions'] });

// 获取入口文件
function getEntry (globPath) {
    var entries = {},
        filename;

    glob.sync(globPath).forEach(function (entry) {
        filename = path.basename(entry, path.extname(entry));
        entries[filename] = entry;
    });

    return entries;
}

// 生成html
function createHtml () {
    var r = [], filename, conf;

    glob.sync(srcDir + '/module/**/*.html').forEach(function (filePath) {
        filename = path.basename(filePath, path.extname(filePath));

        conf = {
            template: 'html!' + filePath,
            filename: filename + '.html',
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            }
        }

        if (filename in entries) {
            conf.inject = 'body';
            conf.chunks = [filename, 'vendor', 'manifest','bootstrap']
        }

        r.push(new HtmlWebpackPlugin(conf))
    })

    return r;
}

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: {
            'vue$': 'vue/dist/vue',
            'jquery$': 'jquery/dist/jquery',
            'src': path.resolve(__dirname, '../src'),
            'assets': path.resolve(__dirname, '../src/assets'),
            'js': path.resolve(__dirname, '../src/js'),
            'components': path.resolve(__dirname, '../src/components'),
            'scss': path.resolve(__dirname, '../src/scss')
        }
    },

    resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    },

    module: {
        // preLoaders: [
        //     {
        //         test: /\.vue$/,
        //         loader: 'eslint',
        //         include: projectRoot,
        //         exclude: /node_modules/
        //     },
        //     {
        //         test: /\.js$/,
        //         loader: 'eslint',
        //         include: projectRoot,
        //         exclude: /node_modules/
        //     }
        // ],

        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                include: projectRoot,
                exclude: /node_modules/
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                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]')
                }
            }
        ]
    },
    // js 中引入的样式处理
    postcss: [autoprefixerConf],
    eslint: {
        formatter: require('eslint-friendly-formatter')
    },
    vue: {
        // .vue 中的样式处理
        loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
        postcss: [autoprefixerConf]
    },

    plugins: createHtml()
}

webpack.prod.conf.js:

var path = require('path')
var webpack = require('webpack')
var merge = require('webpack-merge')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var utils = require('./utils')
var config = require('../config')
var baseWebpackConfig = require('./webpack.base.conf')
var env = config.build.env;


var webpackConfig = 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'),{allChunks: true, disable: false}),

        // new ExtractTextPlugin({
        // filename:utils.assetsPath('css/[name].[contenthash].css'),
        // allChunks: true
        // }),
        // split vendor js and UI framework into its own file
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module, count) {
                // any required modules inside node_modules are extracted to vendor
                // 提取全局依赖的库(vue, jquery)
                var jsReg = /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0;


                // 公共UI库提提取
                // todo 这边可进行更精确的匹配
                var bootstrapUIReg = /bootstrap\.scss$/.test(module.resource);


                return (
                    module.resource && (jsReg || bootstrapUIReg)
                    // module.resource && jsReg
                )
            }
        }),

        // 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: new RegExp(
 '\\.(' +
 config.build.productionGzipExtensions.join('|') +
 ')$'
 ),
 threshold: 10240,
 minRatio: 0.8
 })
 )
 }*/

module.exports = webpackConfig

文件目录:
图片描述

package.json:

{
  "name": "*****",
  "version": "1.0.0",
  "description": "Vue 多页面开发",
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build"
  },
  "keywords": [
    "vue",
    "es6",
    "multi-page",
    "webpack"
  ],
  "author": "*****",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.5.1",
    "babel-core": "^6.18.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-config-standard": "^6.1.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-promise": "latest",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.0",
    "extract-loader": "0.0.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "glob": "^7.1.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.24.1",
    "http-proxy-middleware": "^0.17.2",
    "node-sass": "^3.10.1",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "postcss-loader": "^1.1.0",
    "sass-loader": "^4.0.2",
    "shelljs": "^0.7.5",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^9.7.0",
    "vue-style-loader": "^1.0.0",
    "vuex": "^2.2.1",
    "webpack": "^1.13.3",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.15.0"
  },
  "dependencies": {
    "jquery": "^3.1.1",
    "vue": "^2.0.3",
    "vue-awesome-swiper": "^2.3.2",
    "vue-resource": "^1.2.0",
    "vue-router": "^2.3.0",
    "vue2-countdown": "^1.0.7",
    "vuex": "^2.2.1"
  }
}
阅读 9.1k
2 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题