项目背景
接到一个在线考试系统的项目需求，时间紧，任务重，当然是先上github上搜现成项目，找到一个前端用vue后端用django的项目非常巴适，于是紧忙部署，因为从未接触过vue，期间走了很多弯路，在这里记录一下。
vue环境部署
因为是内网环境，不能连接互联网，部署起来相对复杂。思路就是先在外网环境搭建好，然后整个移植到内网环境。
- 首先是内网安装Node。Win7系统最高支持的是13.14版本。想安装14版本怎么办？首先官网下载13.14msi安装包正常安装，然后下载14.15.3压缩包zip版本，将压缩包内所有内容覆盖Node安装路径下的所有内容，然后在系统变量中添加无视平台审查的的变量 NODE_SKIP_PLATFORM_CHECK=1，
至此安装完成。 - 然后是外围搭建Vue环境。
- VUE项目路径安装项目依赖
npm install
- 测试运行
npm run serve
- 至此，在 C:\Users\Admanistrator 路径下 会有 .vue-templates文件夹。在该路径下的AppData\Roaming文件夹里有npm和npm-cache这两个文件夹。
- 然后是外网项目移植到内网。
- 首先查看内网Node的安装目录
npm config get prefix 查看npm全局安装包保存路径
npm config get cache 查看npm装包缓存路径
# 如果和外网环境不同，修改路径
npm config set prefix "C:/Users/root/AppData/Roaming/npm"
npm config set cache "C:/Users/root/AppData/Roaming/npm-cache"
- 然后把外网的三个文件夹复制到内网相同路径
- 这时把外网项目复制到内网，在内网 npm run serve就可以跑起来了。
Django部署到Apache
之前记录过,在这里开发的80端口
Vue部署到Nginx
- 首先下载nginx稳定版本
- vue项目打包生成dist静态文件夹。这里要注意，修改vue.config.js
module.exports = {
publicPath:'./',
outputDir:'dist',
assetsDir:'static',
devServer: {
proxy: {
'/api': {
//后端地址
target: 'http://18.25.1.43:80',
changeOrigin: true,
pathRewrite: {
//替换api关键变量
'^/api': '/'
}
}
}
}
}
- router的index.js其中
const router = new VueRouter({
mode: 'history', //history模式路由中带#号，hash模式有#号
base: process.env.BASE_URL,
routes
})
- 将dist文件夹复制到nginx目录下的html中，修改nginx.conf文件
server部分
server {
listen 8088; #前端访问时需要的端口
server_name localhost;#前端访问时需要的ip，默认127.0.0.1或localhost
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/dist; # 打包的文件存放路径
index index.html index.htm;
#try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
#try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}
#location ^~/api {
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_buffering off;
# rewrite ^/api/(.*)$ /$1 break;
# proxy_pass http://xxxxx:8080; 后端接口地址
#}
#location /api/ {
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_set_header Host $http_host;
#proxy_set_header X-Nginx-Proxy true;
#proxy_set_header Connection "";
#proxy_pass http://xxxxx:8080; #****后端接口地址
#proxy_redirect default ;
#}
location ^~/api {
rewrite ^/api/(.*)$ /$1 break; #重置api
proxy_pass http://18.25.1.43:80; #后端接口地址
}
到这里，Apache跑django后端，Nginx跑VUE前端没毛病了。
记录下常用命令
httpd.exe -k install -n exam
httpd.exe -k uninstall -n exam
sc.exe delete "ams" #删除
nginx -s reload #尽量在命令行中重启nginx服务
netstat -ano | findstr "80" #查找端口占用
