vue项目上线前后端以及数据库操作整套流程

目录

1.项目优化

 2.项目打包

3.服务器新建数据库

 4.服务器运行node项目

5.服务器配置跨域

---

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 跨域地址;
   }

然后保存，保存完成以后要重新运行