使用Vue-cli创建的项目部署生产模式

Question

Bit of a n00b question: I created project with vue-cli using webpack. On my windows machine I run "npm un dev" and I get a frontend server with HMR and so on. Now I want to deploy my app to a production machine - ubuntu on DigitalOcean.

What are the steps I must take? I'm not very familiar with the logic of how it's supposed to work. If my ubuntu machine has NODE_ENV set to production, it won't install any of the devDependancies and i'm not able to build anything. So I guess I'll have to change that? If yes then it doesn't make any sense since it's a production machine.

And do I have to create another node/express server to serve index.html? Won't it supposed to work out-of-the-box somehow?

Thanks :)

Answer 1

TL;DR Build on your local machine and everything you need will be outputted in the ./dist/ directory, just copy the contents over to the webroot on your production server and you're good to go.

The webpack template handles most of the stuff for you.

Step you need to take to release:

1. Run npm run build on your local machine
2. Copy the contents of the generated ./dist/ directory to your server webroot
3. That's it!

When you run npm run build , the pre-configured build script sets the node environment to production, and builds with only the stuff that should be in production, it also optimizes the code and removes debug capabilities. When it comes to dependencies webpack takes care of that and includes them in the generated javascript files located in the ./dist/js/ , so you need not concern yourself with copying over the node_modules/ directory either. It also copies over everything in your static directory and src/assets directory to the ./dist/ directory to be prepare for a release. And resolves all the references to the new path generated by webpack.

The production server should not be concerned with building the vue app, run the build command on your local machine to keep dev dependencies away from your production server. I recommend against installing webpack and other dev tools on your production server. It just pollutes the server with things not needed there. Some development tools could potentially produce alot of issues on production servers. So best practice is to never install them.

You could optionally create your own release script that uses ftp or rsync, whatver you prefer to copy everything in the ./dist/ directory to the production server webroot. This could be a script in bash, if on windows, run it in git bash or something similar for example.

Hope that cleared things up, congrats on your first vue release!