Laravel 5.2 & Vue2 - how to change Vue publicpath for production?

How do I tell Vue to use /my-app as the publicpath when deployed to production?

Our application is deployed in a subdirectory on our production server: https://foo/my-app

Local setup has the application as the root of the domain: https://my-app

But when we deploy to production links within our Vue components are all missing '/my-app' and instead just have the root domain.

<a href="'/entries/'+entry.id+'/edit">Edit</a>

Locally this will generate as http://my-app/entries/3/edit

On production this will generate as http://foo/entries/3/edit

I understand Vue by default assumes your application is always housed in the root of the domain.

I tried placing the following in webpack.config.js but I see no change when deployed to production:

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/my-app/'
        : '/'
}

Not sure what I am missing and I have to assume this is not an unusual deployment setup.

Thanks for your help.

rameezisrar

6 years ago

Level 18

@uwmwebmob have you tried something like:

if (process.env.NODE_ENV === 'production') {

  module.exports.output.publicPath = '/<REPO_NAME>/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
    })
  ])
}

Mind the <REPO_NAME> publicPath entry in the production part.

Please or to participate in this conversation.