希望长大对我而言，是可以做更多想做的事，而不是被迫做更多不想做的事...... 首页

Vue部署nginx中

丁D
学无止境
2019-11-05 11:34
37230已阅读

nginx vue

摘要本文介绍了liunx环境下，vue项目的部署，nginx的安装。

###一、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/`

```
./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
```
 server {
        listen       8089;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }

```
![](/upload/微信图片_20191105115401.png)

###二、vue部署
####node安装
0.使用`node -v`查看下有没有安装node
1.去官网下载node安装包（https://nodejs.org/en/download/）
![](/upload/微信图片_20191112173916.png)
2.上传到服务器，并解压
3.进行软连接
```
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不允许。

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

####跨域-开发环境
一般来说，我们开发环境使用使用代理
```
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
```
 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的话
```
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  注释掉
```
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  
```
 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
```html
<!DOCTYPE html>
<html>

</head>

<body>

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

**问题**
```html
webpack.base.conf.js
externals: {
    'vue': 'Vue',
    'element-ui': 'ElementUI',
}

main.js
Vue.use(ElementUI, {
 size: 'small'
});

不知道为什么 写成ElementUI不行，写成ELEMENT就可以

```

上一篇：使用frp实现内网穿透和远程桌面控制

下一篇：k8s日志解决方案