How to change basepath on deployment of Vue app

vue.js webpack vuejs2 github-pages vue-cli

12,019

Solution 1

I figured it out. I indeed had to edit the publicPath entry in my webpack.config.js, like so:

var path = require('path')
var webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

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

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.

Next, I also had to update the links in my index.html to use the dot-notation instead of just regular relative paths:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>listz-app</title>
  <link rel="stylesheet" href="./dist/main.css">
</head>

<body>
  <div id="app"></div>
  <script src="./dist/build.js"></script>
</body>

</html>

This configuration works to deploy Vue-cli 2.0 webapplication to Github Pages.

Solution 2

On file vue.config.js

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

On file router.js

/* ... */
import { publicPath } from '../vue.config'
/* ... */
export default new Router({
    mode: 'history',
    base: publicPath,
    /* ... */
})

Solution 3

Assuming your server is already serving your html/js bundles when you go to the url you want.... If you are using vue-router, you also need to set the base path there.

const router = new VueRouter({
  base: "/my-app/",
  routes
})

Solution 4

This has recently been a problem for me. And the above solutions did not work.

The below solution works for vue 2.6, and vue-router 3.1

What I did was to add a relative path as as suggested in this git issue in vue.config.js:

  module.exports = {
      publicPath: './',
      // Your config here
  }

But this did not the entire solution since router views were not rendered, making it necessary to add a base path in the router. The base path must be the same as the vue.config.js's publicPath, to do so use location.pathname, as suggested in this forum question. The complete solution in router.js is:

mode: 'history',
base: location.pathname,
routes: [
  // Your routes here
]

View more solutions

12,019

Author by

Titulum

I 💕 💻

Updated on June 15, 2022

Comments

Titulum almost 2 years

I have a Vue 2.0 webapplication that runs without problems on my computer, but I can't seem to get it to work on a server without the app running on the root directory.

e.g: 'www.someserver.com/my-app/' instead of 'www.someserver.com/'.

I used the webpack-simple template which has this basic webpack configuration. How can I make sure that the app will load the files from the folder instead of the root?
Leo Bartkus over 5 years

Then the problem could be that your server is not configured to serve your page at that url. Have you checked your IIS or Express configuration? You should edit your question to show the error you are getting.
Titulum over 5 years

This is for deployment to github-pages, so I can't edit or see the settings of the webserver.
David 天宇 Wong over 2 years

if you're using vite, publicPath is called "base" in vite.config.js. Not sure how to import the config from vite.config.js because it's defined as a function.