vue-cli怎么和express搭建项目！

1.其实自动解除vue一来,就一直在想这个问题,问题是:express后台有一个服务是3000端口,然后vue-cli又开启了一个8080端口,
那么怎么把他们两个结合在一起呢?

要跨域吗?

部署到服务器的时候应该运行这个npm run dev的命令吗和npm run build的命令吗???等等一大堆的问题

2.原因在于现在太多的前端工具帮我们做了太多，而我们只学会了打命令，而没有搞清楚这些命令到底做了些什么
首先VUE 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣。无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器，也用不了多少行代码。

npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev 来启动哪是开发机上做的事情。正确的做法很简单，通过npm run build 把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http来访问了，开发机上正常，上传以后程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。

3.那么现在问题来了!

a.我们本地应该怎么开发呢,两个端口不一样,这个8080端口访问3000端口的资源是不是涉及到了跨域的请求呢?

解决的办法很简单,改一下vue-cli项目里面的config/index.js文件

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 because relative paths are "buggy" 
   // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps) 
    // In our experience, they generally work as expected, 
    // just be aware of this issue when enabling this option. cssSourceMap: false 
 }

vue-cli 和 express+mongodb结合!

这样当在前端用axios访问 ‘/api’ 的时候,就会被代理到 ‘http://localhost:3000/api’,从而获得需要的数据.

b.当你过五关斩六将忠于将这个项目开发完成了之后,我们如何把它部署到我们的服务器上面去呢?

首先你在你项目运行 npm run build 这个命令那么你的项目就会被打包成一个dist目录,如果是一个静态的没有与后台产生交互的,那么你现在就可以点击这个文件夹里面的index.html运行了

npm run build
vue-cli 和 express+mongodb结合!前端开发完成后,就可以用webpack打包了,注意将config/index.js文件里面的productionSourceMap设为false, 不然打包出来文件很大,最后用express.static中间件将webpack打包好的项目目录’dist’作为express静态文件服务的目录.

app.use(express.static(‘dist’))

c.前后端分离,就是与将这个生成的dist目录和express后台结合起来,然后部署到服务器上面呢,应该怎么弄呢

1.进入服务器的/www文件夹下面然后新建一个文件夹moive,然后提升这个文件夹的读写权限

提升权限:sudo chmod 777 moive

2.在你的项目里面新建一个ecosystem.json文件,然后

然后在这个文件夹下面运行命令(运行这个命令之前呢,我们还需要就是提交更新一下代码) pm2 deploy ecosystem.json production setup显示成功之后你就能在服务器的那个moive文件夹下面看到production这个文件了哦

部署成功之后呢,你这里就会出现一个production的文件夹

然后pm2 deploy ecosystem.json production进行pm2托管

vue-cli怎么和express搭建项目！

猜你喜欢