VUE-CLI and Express+mongodb together!

1. In fact, automatic lifting Vue, has been thinking about this problem, the problem is: Express backstage has a service is 3000 ports, and then VUE-CLI opened a 8080-port,
So how do you combine the two of them?

Do you want to cross the domain?

Should you run this npm run dev command and the NPM Run build command when you deploy to the server???? Wait, a whole bunch of questions.

2. The reason is that too many front-end tools have done so much for us, and we've only learned to call orders, not to figure out what these commands do.

First of all, Vue is a JavaScript front-end framework, doomed it is run in the browser, the server does not have any local requirements, as long as a static file server access to its resource files through HTTP is sufficient. Whether you're using Apache, Ngnix even if you're using node to implement a static file server, you won't be able to use as many lines of code.

npm Run Dev is used in the local development of the time to do the test,Vue Development is the front-end things, not Nodejs service-side program, according to reason, the production environment should not exist NPM, Even Nodejs do not need (with Nodejs to do the Web static service, except), the landlord through SSH into the server, and then run NPM run dev to start which is the development machine to do things. The correct approach is simple, through the NPM run build to the generated Dist folder (do not upload the folder) in the content uploaded to the HTTP server can be accessed through HTTP, the development machine normal, upload after the program error can not run reason 99.99% The possibility is that you have a problem referencing the path to the resource .

3. So now the problem!

A. How we should develop locally, two ports are not the same, this 8080 port access to 3000 port resources is not involved in Cross-domain requests?

The solution is very simple, change the VUE-CLI project inside the Config/index.js file

Dev: {env:require ('./dev.env '), port:8080, Autoopenbrowser:true, assetssubdirectory: ' Static ', Assetspublicpath: '/', Proxytable: {'/api ': {target: ' http://localhost:3000 ', Changeorigin:true}},//CSS sourcemaps off by default Becaus E relative paths are "buggy"//With that option, according to the Css-loader README//(Https://github.com/webpack/css-lo Ader#sourcemaps)//In our experience, they generally work as expected,//Just is aware of this issue when enabling this Option. Csssourcemap:false}

In this way, when the front end uses Axios to access '/api ', it is represented to ' http://localhost:3000/api ' to obtain the required data.

B. How are we going to deploy it to our servers when you over five hurdles loyalty to the development of the project?

First you run the NPM Run build command on your project then your project will be packaged into a dist directory, and if it's a static one that doesn't interact with the background, then you can now click on the index.html in this folder to run

NPM Run Build

The front-end development is completed, you can use Webpack packaging, note that the Config/index.js file inside the Productionsourcemap set to false, or packaging out the file is very large, Finally, the Webpack packaged project directory ' dist ' is used as the directory of express static file service with Express.static middleware.

App.use (express.static (' dist '))

c. The separation of the front and back ends is the combination of this generated dist directory and the express background, and then deployed to the server, what should be done?

1. Go to the server's/www folder and create a new folder Moive, and then promote read and write access to this folder

Elevated permissions: sudo chmod 777 moive

2. Create a new Ecosystem.json file in your project, and then

Then run the command under this folder (before running this command, we also need to submit the update code) PM2 deploy Ecosystem.json production setup shows that you'll be able to work on the server The Moive folder, see the production file here.

After the deployment is successful, you will have a production folder here.

Then PM2 deploy Ecosystem.json production for PM2 hosting

Address of Project publication: vuecli.lovezhishu.cn

GitHub Address: Https://github.com/zhalice2011/vuecli