文章目录

  • 一、确认安装了node和npm
  • 二、安装项目所需依赖
  • 三、在cmd端运行项目
  • 四、在IDEA中运行项目
  • 后端部署流程
  • 一、Mysql数据库配置
  • 二、将run.sh配置到启动项中
  • 三、Maven导入依赖
  • 进阶版
  • 常见问题
  • 安装项目所需的依赖
  • 运行时报错“missing script”
  • 运行时报错
  • 新建数据库报错


一、确认安装了node和npm

vue 前端应用部署至nginx vue前端部署流程_json

二、安装项目所需依赖

1、删除package-lock.json和node_modules 文件

外面也有一组,我们先删除exam-vue里面的

理由如下:

package-lock.json记录了整个node_moudles文件夹的树状结构,还记录了模块的下载地址,但是它是基于项目作者的npm版本库生成的,若不删掉这个依赖文件,容易出现npm版本差异导致的报错。

vue 前端应用部署至nginx vue前端部署流程_json_02

vue 前端应用部署至nginx vue前端部署流程_vue 前端应用部署至nginx_03

2、在vue项目所在目录的路径框架中输入cmd,清除npm缓存

npm cache clean -force

3、重新安装依赖

npm install

这里出现了特别多的warning,多是包版本和函数版本的问题,先不管它

三、在cmd端运行项目

vue 前端应用部署至nginx vue前端部署流程_前端_04

npm run dev

vue 前端应用部署至nginx vue前端部署流程_vue 前端应用部署至nginx_05

四、在IDEA中运行项目

1、导入源码

vue 前端应用部署至nginx vue前端部署流程_vue.js_06

2、在IDEA中配置vue插件

vue 前端应用部署至nginx vue前端部署流程_json_07

3、设置自启动便捷方式

vue 前端应用部署至nginx vue前端部署流程_npm_08

后端部署流程

一、Mysql数据库配置

1、在本地新建一个MySql数据库

使用工具navicat

vue 前端应用部署至nginx vue前端部署流程_vue.js_09

2、配置datasource

vue 前端应用部署至nginx vue前端部署流程_vue 前端应用部署至nginx_10

3、配置sql方言

vue 前端应用部署至nginx vue前端部署流程_npm_11

use MySQL

4、将当前项目sql文件导入

vue 前端应用部署至nginx vue前端部署流程_vue 前端应用部署至nginx_12

导入成功

vue 前端应用部署至nginx vue前端部署流程_vue 前端应用部署至nginx_13

vue 前端应用部署至nginx vue前端部署流程_vue.js_14

3、配置yml文件

vue 前端应用部署至nginx vue前端部署流程_前端_15

二、将run.sh配置到启动项中

三、Maven导入依赖

进阶版

二、用windows10以上版本自带的WSL虚拟机安装Docker

winver查看当前Windows版本

三、打jar包

vue 前端应用部署至nginx vue前端部署流程_前端_16

一定要以maven方式打开pom.xml包

vue 前端应用部署至nginx vue前端部署流程_前端_17

跳过test执行 打包成功

vue 前端应用部署至nginx vue前端部署流程_npm_18

常见问题

安装项目所需的依赖

一、node-sass安装失败

方法一:切换国内淘宝镜像源,排除网络问题

npm install node-sass@^8.1.0 --registry=https://registry.npm.taobao.org -sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

vue 前端应用部署至nginx vue前端部署流程_前端_19

方法二:检查node与node-sass版本是否正确,在node-sass github仓库node-sass npm仓库中查看。

vue 前端应用部署至nginx vue前端部署流程_npm_20

vue 前端应用部署至nginx vue前端部署流程_json_21

vue 前端应用部署至nginx vue前端部署流程_npm_22

在package.json中代码指定版本是6.0+,需要修改。

方法三:

vue 前端应用部署至nginx vue前端部署流程_vue.js_23

vue 前端应用部署至nginx vue前端部署流程_vue 前端应用部署至nginx_24

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RrIkYV8L-1687239714288)(C:\Users\Bihua\AppData\Roaming\Typora\typora-user-images\image-20230615122329050.png)]

二、启动

vue 前端应用部署至nginx vue前端部署流程_vue 前端应用部署至nginx_25

运行时报错“missing script”

vue 前端应用部署至nginx vue前端部署流程_前端_26

运行时报错

vue 前端应用部署至nginx vue前端部署流程_npm_27

原因:为 Node.js 版本是 17 以上所以会运行失败, Node.js 17 版本中最近发布的 OpenSSL3.0, 而OpenSSL3.0 对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响.

方法一:在cmd输入set NODE_OPTIONS=--openssl-legacy-provider,再次执行npm run dev

vue 前端应用部署至nginx vue前端部署流程_json_28

vue 前端应用部署至nginx vue前端部署流程_前端_29

启动成功!

方法二:将node 选项–openssl-legacy-provider加入到配置package.json中

"start": "set NODE_OPTIONS=\"--openssl-legacy-provider\" & npm run dev\n"

vue 前端应用部署至nginx vue前端部署流程_npm_30

运行成功视频:

新建数据库报错

vue 前端应用部署至nginx vue前端部署流程_前端_31

执行sql语句成功但是数据库下没有表

vue 前端应用部署至nginx vue前端部署流程_vue.js_32

vue 前端应用部署至nginx vue前端部署流程_vue.js_33

原因:在自动 导出的SQL文件中给表名和字段都加上了引号,要去掉这些引号才能正常运行

vue 前端应用部署至nginx vue前端部署流程_vue.js_34

vue 前端应用部署至nginx vue前端部署流程_npm_35