Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/heroku/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
部署webpack+;vuejs+;django到Heroku,procfile配置_Django_Heroku_Npm_Webpack_Vue.js - Fatal编程技术网

部署webpack+;vuejs+;django到Heroku,procfile配置

部署webpack+;vuejs+;django到Heroku,procfile配置,django,heroku,npm,webpack,vue.js,Django,Heroku,Npm,Webpack,Vue.js,我正试图将我的VueJS Django应用程序部署到Heroku,但在Heroku上运行webpack时遇到问题。我可以收集静态文件,但似乎webpack没有运行(找不到webpack),因此网站没有运行webpack,这意味着不仅VueJs文件不会传输到ES5,而且我的index.html页面甚至不会调用webpack输出的捆绑代码。你知道为什么会发生这种情况以及如何解决吗 关于一些相关的注释:我使用Gunicorn作为web服务器,使用whitenoise来服务我的静态文件 此外,一旦我能够

我正试图将我的VueJS Django应用程序部署到Heroku,但在Heroku上运行webpack时遇到问题。我可以收集静态文件,但似乎webpack没有运行(找不到webpack),因此网站没有运行webpack,这意味着不仅VueJs文件不会传输到ES5,而且我的index.html页面甚至不会调用webpack输出的捆绑代码。你知道为什么会发生这种情况以及如何解决吗

关于一些相关的注释:我使用Gunicorn作为web服务器,使用whitenoise来服务我的静态文件

此外,一旦我能够运行webpack,即使我在我的.babelrc中设置了es2015预设,我如何在控制台中处理此错误

vendor.js:1未捕获的语法错误:意外的令牌导入

import Vue from 'vue'
import ElementUI from 'element-ui'
以下是我所拥有的(大部分内容都基于VueJS元素初学者工具包)

Package.json:

{
  "name": "element-starter",
  "description": "A Vue.js project",
  "author": "yi.shyang@ele.me",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server -d --inline --hot --env.dev",
    "heroku-postbuild": "rimraf static && webpack -p --config ./webpack.config.js --progress"
  },
  "dependencies": {
    "element-ui": "^1.1.2",
    "vue": "^2.1.8"
  },
  "engines": {
    "node": ">=6"
  },
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.4.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-preset-es2015": "^6.13.2",
    "css-loader": "^0.27.0",
    "eslint": "^3.12.2",
    "eslint-config-enough": "^0.2.2",
    "eslint-loader": "^1.6.3",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.24.1",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  }
}
程序文件:

web: ./manage.py collectstatic --noinput; npm install; npm run heroku-postbuild; gunicorn dashboard.wsgi --log-file -
.LRC:

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}
webpack.config.js

const {
  resolve
} = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')

// where the static files will be accessed from publicly
const publicPath = '/static/'

module.exports = (options = {}) => ({
  entry: {
    vendor: './src/vendor',
    index: './src/main.js'
  },
  output: {
    path: resolve(__dirname, 'static'),
    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    chunkFilename: '[id].js?[chunkhash]',
    publicPath: options.dev ? '/assets/' : publicPath
  },
  module: {
    rules: [{
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: [resolve(__dirname, 'src'), resolve(__dirname, 'static')],
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            root: resolve(__dirname, 'src'),
            attrs: ['img:src', 'link:href']
          }
        }]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /favicon\.png$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        exclude: /favicon\.png$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunksSortMode: 'dependency'
    })
    // options:dev ? '' : new webpack.DefinePlugin({
    //   'process.env': {
    //     NODE_ENV: '"production"'
    //   }
    // }),
    // options:dev ? '' : new webpack.optimize.UglifyJsPlugin({
    //   compress: {
    //     warnings: false
    //   }
    // })
  ],
  resolve: {
    alias: {
      '~': resolve(__dirname, 'src')
    }
  },
  devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    historyApiFallback: {
      index: url.parse(options.dev ? '/assets/' : publicPath).pathname
    }
  },
  devtool: options.dev ? '#eval-source-map' : '#source-map'
})

可能的副本请参阅此问题的答案。请帮助我了解此问题: