2

I faced a problem in vue js when using "npm run build" command when try to deploy the app in to github. It does not create the index.html file in the dist folder. It only contains two files named as "build.js" & "build.js.map". As well as I couldn't deploy this in firebase hosting also.

Below I add the "webpack.config.js" file.

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
Naynajith
  • 75
  • 4
  • Are you using the Vue CLI? Most of this file isn't necessary, or should be in `vue.config.js` – Dan Apr 23 '20 at 08:49
  • I am using the Vue CLI – Naynajith Apr 23 '20 at 08:51
  • Almost everything in here is a default setting for the CLI. What happens if you remove this file completely? – Dan Apr 23 '20 at 08:51
  • I wiil make a try. Could You please provide an easy way to deploy this using github. It may be really helpfull. This is the first. – Naynajith Apr 23 '20 at 08:55
  • [Heroku](https://www.heroku.com/) has automatic GitHub deploy and is free. [Netlify](https://www.netlify.com/) seems like another option, but can't comment because I haven't used it yet. – Dan Apr 23 '20 at 08:57
  • Ok I will try that also. But the real problem is when I am using npm run build it only creates those two files in the dist directory. What happen to the index.html file? – Naynajith Apr 23 '20 at 09:02
  • If removing the config file you showed doesn't help, I would reinstall Vue CLI. – Dan Apr 23 '20 at 09:04

0 Answers0