11

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?

2
  • 1
    Ah, I see what you're saying. So the assets aren't loading from the correct location when built. So you would want to modify the publicPath variable depending on process.env.NODE_ENV.
    – Ohgodwhy
    Commented Nov 5, 2018 at 22:28
  • I already tried something like that but I could not get it right. I am currently using this webpack configuration. Could you maybe have a look at it and maybe show me how to do it?
    – Titulum
    Commented Nov 6, 2018 at 14:33

5 Answers 5

15

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,
    /* ... */
})

2
  • 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. Commented Sep 7, 2021 at 1:20
  • The change on [vue.config] was enough for me to fix the error. I was missing a "/" before "my-app". I didn't use the change on [router] though. Setting "base : publicPath" was causing the build to be unable to find the build files.
    – Jelgab
    Commented Apr 14, 2023 at 13:12
9

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
})
3
  • 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. Commented Nov 7, 2018 at 12:38
  • This is for deployment to github-pages, so I can't edit or see the settings of the webserver.
    – Titulum
    Commented Nov 9, 2018 at 8:27
  • thanks Leo Bartkus Commented Sep 30, 2022 at 16:57
7

In VUE 3 with vite:

Inside vite.config.ts


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue({
            reactivityTransform: true
        })
    ],

    base: '/myNewFolder/',
})

More info : https://vitejs.dev/config/#base

2
  • 1
    Thank you! I've been searching for 30 minutes about why "publicPath" wasn't working, but it was because Vue was bundled with Vite.
    – Arius31
    Commented Dec 14, 2023 at 20:58
  • base: '/myNewFolder/', line in vite.config.js helped solve my problem also. Now the js and css files path starts with ./assets/.... I didnt need vue.config.js
    – Polymath
    Commented Dec 29, 2023 at 13:38
3

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.

3

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
]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.