Search code examples
vue.jsvuex

Dist folder is not created after building vue js project


I tried to run the npm run build command on my vue project. It is successfully running but no dist folder is created. I want to build this project and run it on the server. I am currently working on Windows OS. I tried to compare it with other project's webpack file but found no difference.

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: /\.scss$/,
     use: [
       'vue-style-loader',
       'css-loader',
       'sass-loader'
     ],
   },
   {
     test: /\.sass$/,
     use: [
       'vue-style-loader',
       'css-loader',
       'sass-loader?indentedSyntax'
     ],
   },
   {
     test: /\.vue$/,
     loader: 'vue-loader',
     options: {
      loaders: {
        // Since sass-loader (weirdly) has SCSS as its default parse 
 mode, we map
        // the "scss" and "sass" values for the lang attribute to the 
 right configs here.
        // other preprocessors should work out of the box, no loader 
 config like this necessary.
        'scss': [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
        'sass': [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ]
      }
      // 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
  })
])
}

This is my webpack config file. Please help me with this.


Solution

  • Try to check is there a folder created in where the webpack config file located.If there's not , it seems something wrong with your other configs, you can try this out, it works fine for me in project:

    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'build.js',
        publicPath: './static'
    }