Linux上部署vue-cli并使用vue-ui可视化创建项目
踩了很多坑,部署了2天才弄上去😥,其实不是很难 就是遇到很多问题不知道怎么解决,网上也没有很好的方法
部署完发现没有太多的作用,想要实现完全管理还是有一定的难度,因为我需要管理svn上的很多个项目,但是vue ui管理项目需要把node依赖全部下载下来才能读
我想要的是一种可以全部可视化管理vue项目的工具(包括代码里的组件,代码,路由等等),目前还没有找到开源
cli源码目录cd /root/.nvm/versions/node/v14.0.0/lib/node_modules/@vue
前期准备环境
环境:(vue info指令查看当前环境)
System:
OS: Linux 4.18 CentOS Linux 8
CPU: (2) x64 Intel(R) Xeon(R) Platinum
Binaries:
Node: 14.0.0 - ~/.nvm/versions/node/v14.0.0/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v14.0.0/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
Browsers:
Chrome: Not Found
npmGlobalPackages:
@vue/cli: 5.0.8
- nodejs - 使用nvm包管理工具(Linux版)
- 使用node需要>14
- 下载vue cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 使用
vue ui
指令
vue ui --host 0.0.0.0 --prot 8000
指定端口号和地址
setsid vue ui --host 0.0.0.0
设置后台运行 - 设置nginx
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name 域名;
charset utf-8;
location / {
proxy_pass http://localhost:8000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /graphql {
proxy_pass http://localhost:8000/graphql;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
注意事项!!
- vue ui是需要有一个graphql的apollo-server启动一个websocket的服务,页面需要通信这个服务,如果连不到这个服务的话会导致页面一直在转圈,你会看到在network里面一直在请求graphql,这个解决方案就是在ngnix里面代理到这个服务中,按照我上面的配置文件就可以
- 在可视化里面,项目必须是cli创建出来的否则会没有目录
- 里面功能还是比较少的,没有直接粘贴一个项目好使