vue项目上线前后端以及数据库操作整套流程
目录
1.项目优化
本地的项目或者已经优化的项目直接忽略前两项
当我们完成一个Vue项目的时候，可以用vue uI 进行优化，将我们的项目导入
进去 ，具体的优化流程看之前发布的博客vue 项目优化上线以及如何开启gzip压缩_Mr.mjw的博客-CSDN博客_vue项目开启gzip压缩
vue 项目优化上线以及如何开启gzip压缩_Mr.mjw的博客-CSDN博客_vue项目开启gzip压缩
2.项目打包
使用vue ui 里面的打包工具可以快速将项目打包，打包完成之后可以在本地使用live-server在本地运行此项目，确保无误的话就等待放到服务器的文件夹中
3.服务器新建数据库
下面用的是宝塔Linux面板用其他的盆友可以忽略
登录进去宝塔面板
点击添加数据库会弹出一下窗口
用户名不能使用root，这里先用mydb来代替了,密码一致下面会用到
然后将我们的默认数据上传进去，上传完成之后再次点击导入
4.服务器运行node项目
首先在服务器的目录下创建一个新的文件夹，然后将我们的node文件放到文件夹里面，
<注意不用上传依赖进去，运行项目的时候自己会下载！>
然后再网站的node项目里面添加node项目
项目名称随便先起一个，项目目录就是刚才上传的node文件
启动选项改成自定义启动
添加完成以后会出现
注意！！！
项目端口一定要和app.js里面的端口号一致
这边先随便定义任意数不要冲突，我的是3001
由于上面的是3001所以下面也要和上面定义的一致
有域名的话就绑定域名，没域名的话就用服务器ip，域名一定要解析
然后就可以提交了
然后改里面的文件
下面的三个mydb分别是数据库名字也就是我们新建的数据库还有用户名跟密码
然后node项目就可以运行了
我们的这个项目里面放的是接口，现在就可以请求到这些接口了
本地跨域
如果需要本地跨域则在vue.config.js里面配置
devServer: {
proxy: {
"/api": {
target: "跨域地址",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
},
}5.服务器配置跨域
如果我们在项目的config.js里面设置了跨域，打包完成以后请求不到数据
就需要在服务器里来配置了
点击设置进入设置面板
然后在root下面加进去一下代码
location /api {
proxy_pass 跨域地址;
}然后保存，保存完成以后要重新运行