@NextStack

App.vue:

<template>
  <div>
    <popup v-model="visible">
      我是popup組件
    </popup>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        visible: true
      }
    },
    created () {
      this.$toast('啦啦啦！我是賣報的小當家。')
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" type="text/scss">
</style>

運行的效果:

popup全局組件已經(jīng)注冊成功了，上面效果圖就說明了。但是toast里面引用就報錯。

編譯出的html文件:

...
<script type="text/javascript" src="/static/js/common.js?f56345f"></script>
<script type="text/javascript" src="/static/js/store.js?f56345f"></script>
...

common.js是公共js文件，store.js是對應(yīng)頁面的js文件。common.js 和 store.js里面都引用了.vue文件，導致2個加入了vue.esm.js這文件，相當于存在2個Vue對象，所有我就嘗試了我提問時寫的2種寫法（保證common.js 和 store.js使用的是同一個Vue對象），依然差強人意，需要各位幫忙看看如何解決這問題。

當然改為單頁面，單文件入口就不會出現(xiàn)以上問題。因項目需求只能做多頁面，多入口。

補充:
目前已經(jīng)解決問題經(jīng)NextStack的提點，使用CommonChunkPlugin成功解決問題，代碼修改如下:

// common.js
import Toast from './plugins/toast'
import Popup from './components/popup'

export default function (Vue) {
  Vue.use(Toast)
  Vue.use(Popup)
}

// 對應(yīng)頁面的js
import Vue from 'vue'
import install from '../../common'
import App from './App.vue'

install(Vue)

new Vue({
  template: '<App/>',
  components: {App}
}).$mount('#app')

代碼如上修改，并且webpack設(shè)置里移除common這個入口。這樣只會出現(xiàn)一個vue對象，然后使用CommonChunkPlugin把公用代碼給提取出來。

webpack設(shè)置:

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const config = require('../package.json')

/**
 * 獲取絕對路徑
 * @param dir
 * @returns {string|*}
 */
function resolve (dir) {
  return path.join(process.cwd(), dir)
}
/**
 * vue css加載器
 * @returns {
 *  {css: *, scss: *}
 * }
 */
function cssLoaders () {
  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV !== 'development',
      sourceMap: false
    }
  }

  function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: false
        })
      })
    }

    if (process.env.NODE_ENV !== 'development') {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  return {
    css: generateLoaders(),
    scss: generateLoaders('sass')
  }
}

const pages = fs.readdirSync(resolve('src/pages'))

module.exports = function ({plugins, htmlPluginOptions}) {
  const htmlPlugins = []
  const entrys = {
    // 'common': './src/common.js'
  }

  for (const name of pages) {
    const entry = `./src/pages/${name}/index.js`
    entrys[name] = [entry]
    if (process.env.NODE_ENV === 'development') entrys[name].push('./build/dev-client')
    htmlPlugins.push(new HtmlWebpackPlugin(Object.assign({
      filename: process.env.NODE_ENV === 'development' ? name + '.html' : resolve(config.id + '/' + name + '.html'),
      template: `src/pages/${name}/index.html`,
      inject: true,
      // chunks: ['common', name],
      chunks: ['common.js', name],
      hash: false,
      chunksSortMode (a, b) {
        return a.id < b.id ? 1 : -1
      },
      config: {
        env: process.env.NODE_ENV
      }
    }, htmlPluginOptions)))
  }

  const chunks = Object.values(entrys)
  htmlPlugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      chunks: chunks,
      minChunks: chunks.length
    })
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'common',
    //   chunks: ['common']
    // })
  )

  return {
    entry: entrys,
    output: {
      path: resolve(config.id),
      filename: 'static/js/[name].js?[hash:7]',
      publicPath: `/`,
      chunkFilename: 'static/js/[id].[hash].js'
    },
    resolve: {
      extensions: ['.vue', '.js'],
      alias: {
        '@': resolve('public/src'),
        'vue$': 'vue/dist/vue.esm.js'
      }
    },
    devtool: process.env.NODE_ENV !== 'development' ? false : '#cheap-module-eval-source-map',
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: cssLoaders()
          }
        },
        {
          test: /\.css$/,
          use: process.env.NODE_ENV !== 'development' ? ExtractTextPlugin.extract('css-loader') : ['style-loader', 'css-loader']
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src')]
        },
        {
          test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: `[path][name].[ext]?[hash:7]`
          }
        }
      ]
    },
    // plugins: htmlPlugins.concat(plugins)
    plugins: htmlPlugins.concat(plugins).concat([new webpack.optimize.CommonsChunkPlugin('common.js')])
  }
}

被注釋掉的代碼，是原配置。已經(jīng)成功解決了，非常感謝NextStack

不如直接用 vue 命令行的 webpack 項目模板創(chuàng)建項目，然后稍微修改一下 webapck 的配置文件

或者 https://segmentfault.com/l/15...

有解決方案了嗎？

沒有App.vue的代碼？.vue文件最終也是構(gòu)建成一個VUE實例，你在App.vue中調(diào)用$toast時不能確定插件是否注冊完成。另外webpack打包，需要使用CommonChunkPlugin來拆分代碼