Vue项目发布并部署到Nginx的实践笔记
本文记录vue-element-admin/template项目发布，及部署到windows操作系统山的Nginx服务上的过程，包括遇到的vue-element-admin/template配置与git配合等问题。。
项目简介：
基于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 子进程)的进程。
参考：
《解决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月
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)