How do I get a Vue.JS project to work when hosted on a server?

deploy vue app to apache server
run vue app
vue js on shared hosting
deploy vue app to iis
deploy vue app to aws
deploy vue app to heroku
how to run vue project
deploy vue nginx

I have created a new VueJS project using the Vue UI. This runs locally on http://localhost:8080/ with no errors. In addition, all is fine when I run the build task. However, when I take the files that are built and placed inside the dist folder and uploaded these to my hosting package via FTP I get a blank HTML page and the source code is as follows. Clearly not the as my local host.

Just to note I have tried this on two different hosting packages and I get the same result. Any help welcome.

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
    <link href=/css/app.deed7380.css rel=preload as=style>
    <link href=/js/app.1e49a2f5.js rel=preload as=script>
    <link href=/js/chunk-vendors.0e42f062.js rel=preload as=script>
    <link href=/css/app.deed7380.css rel=stylesheet>
    <link rel=icon type=image/png sizes=32x32 href=/img/icons/favicon-32x32.png>
    <link rel=icon type=image/png sizes=16x16 href=/img/icons/favicon-16x16.png>
    <link rel=manifest href=/manifest.json>
    <meta name=theme-color content=#4DBA87>
    <meta name=apple-mobile-web-app-capable content=no>
    <meta name=apple-mobile-web-app-status-bar-style content=default>
    <meta name=apple-mobile-web-app-title content=pwap>
    <link rel=apple-touch-icon href=/img/icons/apple-touch-icon-152x152.png>
    <link rel=mask-icon href=/img/icons/safari-pinned-tab.svg color=#4DBA87>
    <meta name=msapplication-TileImage content=/img/icons/msapplication-icon-144x144.png>
    <meta name=msapplication-TileColor content=#000000>
</head>

<body>
    <noscript><strong>We're sorry but pwap doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div class=content-wrapper>
        <div id=app></div>
    </div>
    <script src=/js/chunk-vendors.0e42f062.js></script>
    <script src=/js/app.1e49a2f5.js></script>
</body>

</html>

The issue is that your build files is created with the wrong path to your assets.

In order to remove the prefixing / that causes your issue, you have to change the config file index.js in the config folder of your project:

from assetsPublicPath: '/',

to assetsPublicPath: '',

Then, rebuild your app and they should now be gone and your app should now display.

If you are using Vue UI to create your app, you have to do the following:

Open your project in Vue UI and navigate to configuration tab. There, you will select "Vue cli" and then you have to remove the / in the baseUrl input field(In the Norwegian screenshot below this is the "URL-utgangspunkt" label):

Deployment, If you are using Vue Router in history mode, a simple static file server will fail. To deploy your project on Firebase Hosting, run the command:. 8 simple steps to add a serverless back end to a Vue.js project. The server project is obviously deployed with WarpJS, on the cloud, here on Google functions, the front-end is deployed on a

To solve this problem, you create a new js file called vue.config and place it in your project at the same level as your package.json file. Then add the following code to this new js file. The documentation states to include the forward slash '/' however this will retain them and the paths to js & css files etc will still be broken. Therefore, simply update this code as per below. After which you will need to run the build process again. npm run build

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? ''
    : ''
}

Can't run VueJS app in shared hosting server - Get Help, So I've SSH access to my server and I've installed NPM. with the commands : vue create my-project `` cd my-project npm run serve I get this  Yes, just type following 5 commands in your terminal one after another, and you are done(if you have node.js installed).. Step 1. npm install -g vue-cli. This command will install vue-cli globally.

If you're using vue, you can set this in your vue.config.js file:

module.exports = {
    baseUrl: '',
    // rest of your config
};

How to deploy Vue js on shared hosting?, Let's host Vue app on shared hosting!​​ All we need to do, is to execute npm run build command in the project folder. The command will then generate a dist directory that will consist of the files of our application. Then we will have to upload the whole folder to the hosting. 2 step – archive your files. Server side rendering (SSR) is one of those things that’s long been touted as one of the greatest strengths of React, Angular 2+, and Vue 2.It allows you to render your apps on the server, then hydrate them with client side reactivity after the page loads, greatly increasing the responsiveness and improving the load time of your pages.

how to deploy Vuejs project to a shared hosting (arabic), enter the command "npm run build" 2. make "dist" folder into zip file 3. upload "​dist Duration: 3:21 Posted: Nov 28, 2017 Vue.js is a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript. For a richer Vue.js development environment, you can install the Vetur extension which supports Vue.js IntelliSense, code snippets, formatting, and more.

Hosting, Choosing a proper hosting for a Vue.js website can be frustrating. websites do not require a dedicated server to run and can be hosted on a static file hosting. Install and setup Vue.js project is very easy and straightforward. As other JavaScript frameworks, there are multiple ways to start using Vue.js. As other JavaScript frameworks, there are multiple ways to start using Vue.js.

Best way to host a Vue app? : vuejs, and some JS. Found Vue to be relatively easy to pick up and build simple stuff. You could use GitHub pages or netlify which both Offer free hosting for static sites. level 2 Actually, I thought one would need some sort of a server for these pages. But if the If you want a decent starting point for a new project, take a look. @nueverest if you've just created your project with vue init webpack myproject you will see further instructions in your console: cd myproject, npm install. After npm install all packages are downloaded and vue is able to compile with either npm run dev for development server + hot reload, or with npm run build to create a deployable bundle.

Comments
  • Are there errors in the console that might say something is missing or not loaded?
  • Are you using vue-router?
  • You can use your built versions on your localhost first and check for errors. Is your app hosted at root path (http://some-url.com/, not http://some-url.com/some-custom-path/) ?
  • I'd take a look in your network tab and see how the files are being loaded. I'm guessing the path it's taking to load those files may be incorrect. I recognize this as an issue I had before and the src=/js part is similar to the problem I had. By removing the leading / it resolved the file paths.
  • Assuming that this is from webpack, you can change that behavior in the public path: webpack.js.org/guides/public-path. To prevent this I think you can just set it to an empty string (e.g. publicPath:''). I believe the default is / which is what's happening here.
  • I don't have an index.js or a config folder :(
  • Don't you have this in your project folder? (Where you copied the dist folder from)
  • You can however do a manual removal of the slashes by editing your index.html file. However, this is not optimal.
  • Oh, I didn't see you were using Vue Ui.
  • I don't know enough about it all yet to know there is a difference. I am very new to VueJS, so just getting my head around the basics. Seems odd how you run the build task but then this wouldn't work. Big thank you for tying to help.
  • The documentation is really misleading and still not improved to reflect this, this answer solved my issue. Thank you @AI-76
  • There is no vue.config.js file
  • It's not there by default: cli.vuejs.org/config. It's an optional file that lets you apply settings that modify the configuration setup through vue-cli.
  • Not sure the reason for the downvote. This is exactly the same result as the accepted answer but without using the graphic user interface. If vue-cli is present then any adjustments to its logic can be done in the known config file, vue.config.js.