Vue部署nginx中

2022-08-12 21:36:00 浏览数 (1)

一、nginx的安装

安装步骤 安装前环境准备 1：下载nginx安装包nginx-1.17.5（当前最新），并上传到服务器上 这样上传到/root/

2：因为Nginx以来与gcc的编译环境，所以，在mini centos中需要安装编译环境来使Nginx能够编译起来

yum install gcc-c

3：Nginx的http模块需要使用pcre来解析正则表达式

yum -y install pcre pcre-devel

4：依赖的解压包

yum -y install zlib zlib-devel

5：openssl安装

yum install -y openssl openssl-devel

6：建立要安装的目录

切换到/usr/local目录下，新建文件夹nginx-1.17.5

安装nginx 1：，进入上传位置，解压nginx文件 cd /root/ tar -xvf nginx-1.17.5.tar.gz

2：编译，安装

cd /root/nginx-1.17.5 ./configure --prefix=/usr/local/nginx-1.17.5 #指定安装目录

3：在/root/nginx-1.17.5目录下执行编译命令

make

4:执行安装命令

make install

5:切换到安装目录

cd /usr/local/nginx-1.17.5

6:启动 cd /usr/local/nginx-1.17.5/sbin/

代码语言：javascript复制
./nginx 
./nginx -s stop 
./nginx -s quit 
./nginx -s reload 
./nginx -s quit:此方式停止步骤是待nginx进程处理任务完毕进行停止。 
./nginx -s stop:此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。

7：开放nginx默认端口号80

/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT

8：远程访问测试

9:这里我的80端口已经被占用了，所以修改端口号 vim conf/nginx.conf

代码语言：javascript复制
server { 
listen 8089; 
server_name localhost; 
location / { 
root html; 
index index.html index.htm; 
}

二、vue部署

node安装

0.使用node -v查看下有没有安装node 1.去官网下载node安装包（https://nodejs.org/en/download/）

2.上传到服务器，并解压 3.进行软连接

代码语言：javascript复制
ln -s /usr/local/node-v12.13.0-linux-x64/bin/npm /usr/local/bin/npm 
ln -s /usr/local/node-v12.13.0-linux-x64/bin/node /usr/local/bin/node

4.node -v查看有没有安装成功 如果没有可能是环境变量的问题使用echo $PATH看看有没有/usr/local/bin

当我们使用vue来编写一个前端页面，就意味着我们要做成了前后端分离了，然而在前后端分离的场景下，不可避免的我们就会遇到了跨域问题。

比如：我们将前端项目部署在192.168.1.1:8080下 后端项目部署在192.168.1.1:8081下，根据同源策略只要协议，ip，或端口只要有一个不一样就意味着跨域。

跨域是指浏览器禁止跨域请求，而不是这个语言如js不允许。

我们这里将跨域请求分为开发环境下的跨域和生产环境中的跨域。

跨域-开发环境

一般来说，我们开发环境使用使用代理

代码语言：javascript复制
module.exports = { 
dev: { 
// Paths 
assetsSubDirectory: 'static', 
assetsPublicPath: '/', 
proxyTable: { 
'/api/**': { 
target: 'http://localhost:10088', // 你接口的域名 
secure: false, 
changeOrigin: false, 
} 
}, 
省略其他...

使用npm run dev 启动项目，发现可以访问后端，完美

跨域-生产环境

生产环境我们可以使用nginx做成反向代理，步骤如下 1.首先我们将项目打包使用 npm run build 发现项目多了一个dist文件夹，这就是打包后的文件夹，里面有index.html和static文件夹

2.我们在服务器建立一个目录，这里/usr/local/nginx-1.17.5/vue-demo,然后将上一步打包后index.html和static上传到这个目录下

3.配置nginx.conf

代码语言：javascript复制
server { 
listen 8089; 
server_name localhost; 
#charset koi8-r; 
#access_log logs/host.access.log main; 
location / { 
root /usr/local/nginx-1.17.5/vue-demo; #前端项目的位置 
index index.html index.htm; 
} 
location /api { #接口api的去访问后端接口 
proxy_pass http://54288.top; #后端项目 
} 
省略其他.... 
} 
如上面代码我将前端项目vue-demo

4.启动nginx ，访问，54288.top:8089 完美，部署完成跨域也完成

5.刷新404的话

代码语言：javascript复制
location / { 
root /usr/local/nginx-1.17.5/vue-demo; #前端项目的位置 
index index.html index.htm; 
try_files $uri $uri/ /index.html 
}

前端项目也可以部署到其他的服务器上，不一定要nginx，可以是tomcat。将打包后的文件放在tomcat的webapp目录下，即可

优化

vendor文件过大

当我们部署成功的时候发现首次访问的时候速度非常慢 谷歌F12 点network标签 vendor.1638a8b61935657472c5.js 830790 830KB js文件下载很慢

主要是因为我在main.js引用了第三方依赖element-ui，，导致打包的vendor文件过大

优化步骤 1.将Vue ElementUI 注释掉

代码语言：javascript复制
import Vue from 'vue' 
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
//import Vue from 'vue' 
import App from './App' 
import router from './router' 
//import ElementUI from 'element-ui'; 
//import 'element-ui/lib/theme-chalk/index.css'; 
// 引用API文件 
import api from './api/index.js' 
//權限校驗 
import '@/permission.js' 
Vue.use(ELEMENT, { 
size: 'small' 
}); 
// 将API方法绑定到全局 
Vue.prototype.$api = api

2.webpack.base.conf.js 新增externals

代码语言：javascript复制
context: path.resolve(__dirname, '../'), 
entry: { 
app: './src/main.js' 
}, 
externals: { 
'vue': 'Vue', 
'element-ui': 'ELEMENT', 
}, 
output: { 
path: config.build.assetsRoot, 
filename: '[name].js', 
publicPath: process.env.NODE_ENV === 'production' 
? config.build.assetsPublicPath 
: config.dev.assetsPublicPath 
},

3在index.html 通过cdn引入 vue和 element-ui

代码语言：javascript复制
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<title>vue-demo</title> 
</head> 
<body> 
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<!-- 引入组件库 --> 
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script> 
<!-- 引入样式 --> 
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css"> 
<div id="app"></div> 
<!-- built files will be auto injected --> 
</body> 
</html>

结果 重新 运行npm run build查看文件大小 vendor文件只有46KB了，并且访问的时候很快，完美

问题

代码语言：javascript复制
webpack.base.conf.js 
externals: { 
'vue': 'Vue', 
'element-ui': 'ElementUI', 
} 
main.js 
Vue.use(ElementUI, { 
size: 'small' 
}); 
不知道为什么 写成ElementUI不行，写成ELEMENT就可以
nginx node.js yum vue.js 打包

0 人点赞