Vue-CLI webpack-simple template - How to run build

Question

I have a Vue.js app that runs perfectly fine with npm run dev, but when doing npm run build and opening the index.html, there will be no activity, only a blank page.

The directory in the html is dist/build.js, which is loaded correctly.

This is the webpack config:

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|png)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }
]
},
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  },
  extensions: ['*', '.js', '.vue', '.json']
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
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
})
])
}

These are the dependencies in package.json:

"dependencies": {
"firebase": "^4.10.1",
"vue": "^2.5.11",
"vue-router": "^3.0.1",
"vuefire": "^1.4.5",
"vuex": "^3.0.1"
},
"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "babel-preset-stage-3": "^6.24.1",
  "cross-env": "^5.0.5",
  "css-loader": "^0.28.7",
  "file-loader": "^1.1.4",
  "vue-loader": "^13.0.5",
  "vue-template-compiler": "^2.4.4",
  "webpack": "^3.6.0",
  "webpack-dev-server": "^2.9.1"
}

The dist folder and index.html are in the same directory. The index.html shows no content or errors in log.

@Phil I'm opening it as an ordinary static html file (just double clicking it). The source in the html for the build is dist/build.js (It's linked but nothing happens) — skpdm
I resolved this issue by editing the firebase.json file and setting property "public" to a dot: "." (top folder).This is because Vue and Firebase use a different default folder structure and firebase looks in the wrong place.. Alternatively, you can edit both firebase.json and webpack.config.json to make them both use some common sub folder like public. — Yogi

Phil Phil · Accepted Answer · 2018-03-07T01:31:09

I'm assuming you're opening the index.html file directly, eg

file:///home/you/some-project-folder/index.html

The webpack-simple template assumes you'll be serving your app via an HTTP server with the app at the document root (ie /).

You can see this in the index.html...

<script src="/dist/build.js"></script>

Note the / prefix.

The idea is that you upload index.html and the dist folder to some hosting provider's server.

Now, you could edit this path to be dist/build.js and it may work but paths to assets will probably be wrong and any AJAX requests may not work due to browser limitations on resources loaded via file:///

Vue-CLI webpack-simple template - How to run build

1 Answers