npm run build: Change publicPath from '/dist/' to './dist/' ?

[FilipQL]

I've started a thread about this on Vue-forum: https://forum.vuejs.org/t/vue-cli-webpack-production-images-vis-icons-are-not-loaded-where-to-import-css/6647/3

I am using Vue-cli [Webpack] and I have installed Vis.js. In App.vue I have added (imported) vis.css:

<style>
    @import "../node_modules/vis/dist/vis.css";
    ...
</style>

When I run npm run dev - everything works fine, all Vis icons are loaded (displayed), but when I run npm run build - when I open the app in the browser - Vis icons are missing and I am getting the following errors:

In webpack.config.js when I changed publicPath from '/dist/' to './dist/' - after running the npm run build command, everything works fine.

Now, I'm not sure whether it is a good idea to have publicPath: './dist/' by default when we are running only the npm run build command (and when we run npm run dev - then it should be just '/dist/').

[zcong1993]

maybe you can try this,
change publicPath to './dist/' when env is production

if (process.env.NODE_ENV === 'production') {
  // change publicPath to './dist/' when env is production
  module.exports.output.publicPath = './dist/'
  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
    })
  ])

[FilipQL]

@zcong1993 Tested, it works, thanks!

[oigordantas]

thanks

[zcong1993]

@vanydiah I think this vue-cli is much more modern to start new vue project, you can give a try.