CODEWITHSUNDEEP
vue.jswebpackvuejs2github-pagesvue-cli
Titulum
Titulum

Reputation: 11456

How to change basepath on deployment of Vue app

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?

Upvotes: 11

Views: 23555

Answers (5)

Emmanuel
Emmanuel

Reputation: 8622

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

Upvotes: 7

fifoq
fifoq

Reputation: 203

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
]

Upvotes: 3

ailtonbsj
ailtonbsj

Reputation: 350

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

Upvotes: 15

Titulum
Titulum

Reputation: 11456

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.

Upvotes: 3

Leo Bartkus
Leo Bartkus

Reputation: 1946

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
})

Upvotes: 9

Related Questions