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!

What are you using to host the site? And what is the "parent" site that you are trying to add it to? Is it just a static site? PHP? Another Vue site? — Matti Price, Apr 24 '18 at 14:15
I'm using Apache and the other website is written in PHP. But that website doesn't use any .htaccess files. — Pascut, Apr 24 '18 at 14:18
Have you checked the console to see if there are errors with Vue or if Vue is loading at all? — Matti Price, Apr 24 '18 at 14:30
Good observatiob. My: domain.com/vue/hello creates the Vue App component, and the path is: path:"/vue/hello" instead of path:"/hello". I guess that this might be the problem why the routes are not recognized. — Pascut, Apr 24 '18 at 14:39
Ok, yup, 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. — Matti Price, Apr 24 '18 at 14:42
You should add the above comment to a separate answer (so I'll be able to select it as winner). In this way I found the problem. Using Vue Debug plugin for Chrome I observated that the route is different and I edited the router base to: base: '/vue/', now it works ok. — Pascut, Apr 24 '18 at 14:43

score 5 · Answer 1 · answered Apr 24 '18 at 14:43

5

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

answered Apr 24 '18 at 14:43

Marco Pantaleoni

2,529
15
14

This is the solution. I found it using Vue Debug plugin for Chrome following Matti Price's suggestions. – Pascut Apr 24 '18 at 14:45

score 4 · Accepted Answer · answered Apr 24 '18 at 14:44

4

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.

answered Apr 24 '18 at 14:44

Matti Price

3,351
15
28

You saved my day :( , is there a work around to avoid that ? – Amor.o Nov 29 '19 at 17:51

score 0 · Answer 3 · answered Jun 10 '20 at 22:46

This is how I built my router index.js in a dockerized vue project, but still doesnt work when deployed in production, where as works in development. Everytime i navigate to about screen it returns 404

 Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'landing',
    component: Landing
  } , {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  base: '/app/',
  routes
});

My docker file looks as below :

    FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm clean-install --fix

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build --fix

EXPOSE 8080
CMD [ "http-server", "dist" ]

VueJS build to folder routes not working

3 Answers3

Linked