项目简介:
基于vue-element-admin前端后台方案的大数据可视化模板.,这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint &ECharts & ECharts-stat等,这些搭建后台必要的东西。
环境说明:
- 开发工具:HBuilder X 2.9.7.20201105
- vue-admin-template@4.4.0
- @vue/cli 4.5.7
- npm@6.14.8
- nginx-1.18.0
- vue 2.6.10
vue-admin-template项目配置:
E:/01study/Vue-Bigdata-template/.env.production
# just a flag
ENV = 'production'
# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'http://192.168.16.71:8090'
E:/01study/Vue-Bigdata-template/src/main.js
注释或删除掉mock配置
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
/**
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
*/
1. 发布
1.1. npm install
在Vue-Bigdata-template目录下,或者在HBuilder X项目工程下,执行命令:
npm install
由于开发过程中,频繁操作,需要重新发布一遍。
npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
rd node_modules /s
node_modules, 是否确认(Y/N)? y
del package-lock.json
npm install
npm install过程,有如下提示:
npm WARN vue-admin-template@4.4.0 No repository field.
这是因为删除node_modules文件,导致之前与代码仓库的联系消失,有两种解决方案:
方案一:将项目设置为私有
在package.json中添加
“private”: true
方案二:将项目的仓库地址添上即可
E:/01study/Vue-Bigdata-template/package.json
{
"name": "vue-admin-template",
"version": "4.4.0",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
......
},
"repository": {
"type": "git",
"url": "http://192.168.16.71:10101/summary/Vue-Bigdata-template.git"
},
1.2. npm run dev
运行项目,检查工程。
npm run dev
> vue-admin-template@4.4.0 dev E:\01study\Vue-Bigdata-template
> vue-cli-service serve
'vue-cli-service' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin-template@4.4.0 dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-admin-template@4.4.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xiaoyw\AppData\Roaming\npm-cache\_logs\2020-11-09T00_51_15_548Z-debug.log
这是由于步骤一:num install造成的问题,没有及时处理而引发,处理掉步骤一的问题,即可解决。
1.3. 打包:npm run build:prod
执行打包命令:npm run build:prod,报出如下错误提示:
在打包过程出现 没有可用于依赖类型的模块 CssDependency
Error: No module factory available for dependency type: CssDependency
解决方案如下:
在vue.config.js中添加:
module.exports = {
......
css: {
extract: false
},
打包成功,在项目中增加dist目录,目录下包括:
- static文件夹
- favicon.ico
- index.html
2. 部署静态服务
2.1. Nginx配置
修改conf\nginx.conf配置文件:
server {
listen 80;
server_name localhost;
charset utf-8; # 避免中文乱码
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
try_files $uri $uri/ /index.html; #官网介绍设置这条可以解决history路由的问题
index index.html index.htm;
autoindex on; #开启索引功能
autoindex_exact_size off; # 关闭计算文件确切大小(单位bytes),只显示大概大小(单位kb、mb、gb)
autoindex_localtime on; # 显示本机时间而非 GMT 时间
}
2.2. 部署发布结果
把步骤三中的dist文件夹里内容,拷贝到nginx.conf配置文件所描述的html文件夹下,也是跟目录下。
start nigix
浏览器输入:http://localhost就可以访问了。
2.2.1. 关于nigix服务
由于上述启动nigix服务到后台,容易遗忘,关掉窗口,造成nginx服务运行而不知。
正常关闭命令:
nginx - s quit
对于遗忘情况,后台杀死进程,结束程序:
查询占用端口的进程
C:\Users\xiaoyw>netstat -ano|findstr "80"
按PID,查询进程情况,杀死进程
C:\Users\xiaoyw>tasklist|findstr "7480"
nginx.exe 7480 Console 1 15,032 K
C:\Users\xiaoyw>taskkill /PID "7480" /F
成功: 已终止 PID 为 7480 的进程。
C:\Users\xiaoyw>taskkill /F /t /im nginx.exe
成功: 已终止 PID 12708 (属于 PID 18092 子进程)的进程。
成功: 已终止 PID 18092 (属于 PID 14564 子进程)的进程。
成功: 已终止 PID 14564 (属于 PID 32 子进程)的进程。