how to deploy vue app in the shared hosting environment?

问题

I would like to deploy my vue application on shared hosting server. How should I do it? Its a bit confusing as of now. Will I need express js for it or I can directly upload it like the normal html site?

回答1:

Here's how I deployed mine.

Goto to your project folder -> config -> index.js file ensure that the assetsPublicPath: is pointed to the public_html path of your shared hosting account.
Run the "npm run build" command.
Go to your project folder copy the contents of the dist folder paste them in the public_HTML folder of your cpanel.

Now I am sure there are better ways to do this, please anybody with a better way should let us know.

回答2:

There isn't typically anything particularly special about deploying a vue application to a shared hosting environment. Often the best first step is to "deploy" the website to your local development box running similar web server software as your shared hosting environment.

Once you can make the vue app run there outside of your coding environment, then you know exactly which files you need to deploy to your shared hosting environment to have it run at the hosting company. You shouldn't typically need to deploy any additional files to the hosting company that you are not using when "hosting" the site on your own dev box outside of your coding environment.

回答3:

Simply copy your index.html file and static folder and paste them on the root folder of your server e.g public_html, if you intend changing the name of your directory i.e maybe the app lives in a sub directory of your public directory, then you have to change your config/index.js file

// change this line 
assetsPublicPath: '/',
// e.g
assetsPublicPath: '/dist',
assetsPublicPath: '/myapp',

Then run npm run build it will work perfectly

回答4:

I just did this and I had to check out several resources so I'm gonna put it all here, to save someone else.The following worked for me:

1) Run "npm run build"

2) Your assets should be in a "static" folder

3) Upload your index.html and all files in the /dist and /static folder to the directory (public_html or the directory of your sub domain, if its one)

4) Done!!

P.S You most likely would run into 404 errors when you reload pages of the deployed app, not to worry, just include a .htaccess file which has this configuration:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

AND THEN YOU'RE GOOD!! I hope this helps.

P.S.S You can check out my website (not vue, haha) at https://www.khairahscorner.com, I do other things than stay on stack overflow all day looking for solutions.

来源：https://stackoverflow.com/questions/47327621/how-to-deploy-vue-app-in-the-shared-hosting-environment

标签

deployment

server

vuejs2

shared-hosting