一、服务端+前段代码
二、安装环境
2.1 开发环境版本准备
PHP 7.4.3 MySQL 5.7.37 node 14.17.6 npm 6.14.11 cnpm 6.1.1
2.2.1mac本地安装 brew 工具
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2.2.2 brew 安装php
brew search php #可以查看php包 brew install [email protected] #安装 php -v 查看安装后的版本
2.2.3 brew 安装mysql
brew search mysql brew install [email protected] mysql -V 安装后需要重新打开终端查看版本
2.2.4 brew 安装 nginx
brew install nignx 直接安装nginx就行
2.2.5 查看nginx目录
brew info nginx brew services restart nginx nginx -t # 检测nginx配置文件 /opt/homebrew/var/www #默认文件目录 /opt/homebrew/etc/nginx/servers/ #默认配置目录
2.2.6 本地域名配置 默认访问的是80端口
#前端配置
server {
listen 80;
server_name localhosttest.com;
root /Users/localhostqianduan/resources/admin/dist;
index index.html;
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location / {
try_files $uri $uri/ /index.html;
}
error_log /tmp/dc.error.log;
}
#后端配置
server {
listen 80;
server_name api.localhosttest.com;
root /Users/localhostqianduan/resources/admin/public;
index index.php index.html index.htm;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
include fastcgi_params;
}
}
2.3 服务器端文件配置
2.3.1创建数据库 ，[需要登录到数据库终端进行创建]
CREATE DATABASE <tablename>
2.3.2 复制环境配置文件， 需要终端登录到项目根目录
cp .env.example .env ##配置好数据库 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE= DB_USERNAME= DB_PASSWORD=
##填写好服务端URL
APP_URL=http://api.localhosttest.com
2.3.3 安装依赖
composer update -vvv --profile ## 或 composer install -vvv --profile
2.3.4 生成项目密钥
php artisan key:generate ############## 不知道具体作用
2.3.5 执行数据迁移
#项目根目录执行 php artisan migrate
2.3.6 生成默认用户
## 用户名：[email protected] 按照提示设置初始密码 ## 注意：密码需大于6位 php artisan user_init
2.3.7 初始化菜单及权限
cd 项目根目录 cp ./perm-menus.example ./config/perm-menus.json php artisan menus_init
2.3.8 初始化Passport
php artisan passport:install ## 执行后输出如下： Client ID: 1 Client secret: xxxxxxxxxxx1 Password grant client created successfully. Client ID: 2 Client secret: xxxxxxxxxxxxx ## 将令牌信息填入.env对应配置中并保存 CLIENT_ID1=1 CLIENT_SECRET1= CLIENT_ID2=2 CLIENT_SECRET2=
2.3.9 创建文件符号链接
php artisan storage:link
2.4 客户端环境配置
2.4.1 环境配置文件
## 进入项目目录 cd resources/admin ## 创建环境文件 vim .env.development // 开发环境 vim .env.production // 生产环境 ## 填写以下配置 ENV = 'development' VUE_APP_BASE_API = 'http://api.localhosttest.com/api' VUE_APP_SOCKET_API = 'http://api.localhosttest.com' #没有socket可以不写为空 VUE_APP_STATIC_PATH = 'http://api.localhosttest.com' VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_APP_TITLE = '【项目的标题】'
2.4.2 前段环境配置 都是项目resource/admin/下进行:
2.4.3 Node.js安装
截至最后的更新（2023年4月），Homebrew可能不会直接提供安装旧版本Node.js（如14.17.6）的选项，因为Homebrew倾向于保持软件包的最新状态。然而，你仍然可以通过Homebrew的版本管理功能或使用n或nvm（Node版本管理器）这样的工具来安装特定版本的Node.js。下面是如何做到这一点的步骤： 1、安装nvm： 使用Homebrew安装nvm可以帮助你管理不同版本的Node.js。 brew install nvm 2、配置nvm： 安装完成后，按照提示设置nvm的环境变量。你需要将以下内容添加到你的shell配置文件中（如~/.bash_profile, ~/.zshrc, ~/.profile, 或者其他你使用的shell配置文件）。 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion 之后，重新加载你的shell配置或重启终端。 3、使用nvm安装Node.js 14.17.6： nvm install 14.17.6 nvm use 14.17.6
2.4.4 安装依赖
## 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #如已安装请忽略 ## 安装项目依赖 cnpm install ## 本地运行 npm run dev ## 如果报`Cannot find module 'core-js/modules/es6.regexp.constructor'`的错误 ## 执行`cnpm install -g core-js@2`后，再次`npm run dev`
2.4.5 vue.config.js 配置
devServer: {
port: port,
host: 'localhosttest.com',
disableHostCheck:true,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhosttest.com:${port}/mock`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
after: require('./mock/mock-server.js')
},