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,
// 
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 pression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],

// Run the build mand 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',
      ponent: HelloWorld
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      ponent: HelloWorld
    },
    {
      path: '/auth',
      name: 'Auth',
      ponent: Auth
    }
  ]
})

3) .htaccess

## .html & 
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: or just , 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 . In this case, the /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!

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/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 pression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],

// Run the build mand 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',
      ponent: HelloWorld
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      ponent: HelloWorld
    },
    {
      path: '/auth',
      name: 'Auth',
      ponent: Auth
    }
  ]
})

3) .htaccess

## https://router.vuejs/en/essentials/history-mode.html & https://stackoverflow./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./vue/hello or just http://myapp./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!

• javascript
• vue.js
• vuejs2
• vue-router

• 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 Commented Apr 24, 2018 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 Commented Apr 24, 2018 at 14:18
• 1 Have you checked the console to see if there are errors with Vue or if Vue is loading at all? – Matti Price Commented Apr 24, 2018 at 14:30
• Good observatiob. My: domain./vue/hello creates the Vue App ponent, 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 Commented Apr 24, 2018 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 Commented Apr 24, 2018 at 14:42

3 Answers 3

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

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.

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',
    ponent: Landing
  } , {
    path: '/about',
    name: 'about',
    ponent: () => 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" ]