vue-element-admin/template项目发布并部署到Nginx上的实践日志

环境说明：

开发工具：HBuilder X 2.9.7.20201105
[email protected]
@vue/cli 4.5.7
[email protected]
nginx-1.18.0

vue-admin-template项目配置：
E:/01study/Vue-Bigdata-template/.env.production

1
2
3
4
5
6

# 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配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
* 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

由于开发过程中，频繁操作，需要重新发布一遍。

1
2
3
4
5
6
7
8
9

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过程，有如下提示：

1	npm WARN [email protected] No repository field.

这是因为删除node_modules文件，导致之前与代码仓库的联系消失，有两种解决方案：

方案一：将项目设置为私有

在package.json中添加

“private”: true

方案二：将项目的仓库地址添上即可
E:/01study/Vue-Bigdata-template/package.json

1
2
3
4
5
6
7
8
9
10
11
12

{
"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

运行项目，检查工程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

npm run dev
> [email protected] dev E:\01study\Vue-Bigdata-template
> vue-cli-service serve

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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

1	Error: No module factory available for dependency type: CssDependency

解决方案如下：

在vue.config.js中添加：

1
2
3
4
5

module.exports = {
......
css: {
extract: false
},

打包成功，在项目中增加dist目录，目录下包括：

static文件夹
favicon.ico
index.html

2. 部署静态服务

2.1. Nginx配置

修改conf\nginx.conf配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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文件夹下，也是跟目录下。

1	start nigix

浏览器输入：http://localhost就可以访问了。
在这里插入图片描述

2.2.1. 关于nigix服务

由于上述启动nigix服务到后台，容易遗忘，关掉窗口，造成nginx服务运行而不知。
正常关闭命令：
nginx - s quit

对于遗忘情况，后台杀死进程，结束程序：

1
2
3
4
5
6
7
8
9
10
11
12
13

查询占用端口的进程
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 子进程)的进程。

参考：

《解决webpack打包报错 No module factory available for dependency type: CssDependency报错》 CSDN博客，一如既往的，2020年8月
《vue-cli打包到部署到nginx服务器》博客园，front-gl ，2018年7月
《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（1）——自定义菜单和仪表盘》 CSDN博客，肖永威，2020年10月