Laravel Vue.js SPA - npm run prod需要永远

时间:2018-06-14 14:13:52

标签: javascript laravel npm webpack vuejs2

当我npm run watch时,一切都很好,但是当我制作npm run prod时大约需要20分钟,然后白色死亡屏幕在控制台中出错 - webpackJsonp is not defined

我不会在那里使用不寻常的东西,它真的是非常简单的网络应用程序,我不明白。

另一个线索是我在OpenVNZ容器上运行它,但是一切看起来都很正常,我在那里有内存的交换文件。

这是我的package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "lint": "vue-cli-service lint resources/assets/js"
  },
  "dependencies": {
    "@chenfengyuan/vue-number-input": "^0.3.0",
    "@fortawesome/fontawesome": "^1.1.4",
    "@fortawesome/fontawesome-free-brands": "^5.0.8",
    "@fortawesome/fontawesome-free-regular": "^5.0.8",
    "@fortawesome/fontawesome-free-solid": "^5.0.8",
    "@fortawesome/vue-fontawesome": "^0.0.22",
    "@tinymce/tinymce-vue": "^1.0.6",
    "axios": "^0.18.0",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap": "^4.1.0",
    "cyrillic-to-translit-js": "^2.1.0",
    "dadata-suggestions": "^1.1.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "js-cookie": "^2.2.0",
    "moment": "^2.22.1",
    "popper.js": "^1.14.1",
    "sweetalert2": "^7.15.1",
    "tinymce-vue-2": "0.0.5",
    "v-wow": "^1.2.1",
    "vform": "^1.0.0",
    "vue": "^2.5.16",
    "vue-carousel": "^0.7.1",
    "vue-collapsible": "^2.0.0",
    "vue-i18n": "^7.6.0",
    "vue-masked-input": "^0.5.2",
    "vue-meta": "^1.4.4",
    "vue-read-more": "^1.1.1",
    "vue-router": "^3.0.1",
    "vue-tinymce": "^1.0.5",
    "vue-tinymce-editor": "^1.6.2",
    "vue2-animate": "^2.0.0",
    "vue2-collapse": "^1.0.11",
    "vuelidate": "^0.6.2",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.3",
    "vuex-router-sync": "^5.0.0",
    "wowjs": "^1.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.0.0-beta.6",
    "@vue/cli-service": "^3.0.0-beta.6",
    "@vue/eslint-config-standard": "^3.0.0-beta.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "cross-env": "^5.1.4",
    "laravel-mix": "^2.1.1",
    "vue-input-number": "^0.1.3",
    "vue-template-compiler": "^2.5.16",
    "webpack-bundle-analyzer": "^2.11.1"
  }
}

和webpack配置

const path = require('path')
const mix = require('laravel-mix')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

mix.config.vue.esModule = true

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .sourceMaps()
  .disableNotifications()

if (mix.inProduction()) {
  mix.version()

  mix.extract([
    'vue',
    'vform',
    'axios',
    'vuex',
    'jquery',
    'popper.js',
    'vue-i18n',
    'vue-meta',
    'js-cookie',
    'bootstrap',
    'vue-router',
    'sweetalert2',
    'vuex-router-sync',
    '@fortawesome/fontawesome',
    '@fortawesome/vue-fontawesome'
  ])
}

mix.webpackConfig({
  plugins: [
    // new BundleAnalyzerPlugin()
  ],
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.join(__dirname, './resources/assets/js')
    }
  },
  output: {
    chunkFilename: 'js/[name].[chunkhash].js',
    publicPath: mix.config.hmr ? '//localhost:8080' : '/'
  }
})

0 个答案:

没有答案