VueJS build to folder routes not working

Question

I have a VueJS app with the following configs:

1) config.index.js

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '',

/**
 * Source Maps
 */

productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],

// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report

}

2) router/index.js

export default new Router({
  mode: 'history',
  // base: process.env.ROUTER_BASE,
  routes: [
    {
      path: '/',
      name: 'HelloWorldBase',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/auth',
      name: 'Auth',
      component: Auth
    }
  ]
})

3) .htaccess

## https://router.vuejs.org/en/essentials/history-mode.html & https://stackoverflow.com/a/34624803
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]

After I run: npm run build

The dist folder contains the folder: "static" and the index.html file.

If I copy the content of the "dist" folder and the ".htaccess" file to the "vue" folder from my existing website when I run: http://myapp.com/vue/hello or just http://myapp.com/vue/hello, the pages are not loaded, and instead only the content of "index.html" is loaded.

What am I doing wrong?

If I create a virtual machine and point it to the "vue" folder of my website the pages are working well. For example, my virtual machine is http://vue.local. In this case, the http://vue.local/hello page is working.

But when I want to run Vue inside of the other website, the pages don't work, all of them return the content of index.html.

Any help will be great, thanks!

Answer 1

Your problem is that you are hosting the vue app in a subpath, while by default it expects to exist at /. To solve this problem you have to set the base option of vue-router.

Probably you'll need to set also assetsPublicPath in your config.index.js

Answer 2

The Vue instance is seeing the whole path from the root, not just the portion relative to what your page that actually has Vue on it.

The Vue-Router should have some settings on it where you can set the root, or you can change your paths to include the full path in the routes.