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;
} 
二、vue部署
node安装
0.使用node -v查看下有没有安装node
1.去官网下载node安装包（https://nodejs.org/en/download/）
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
<!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了，并且访问的时候很快，完美
问题
webpack.base.conf.js
externals: {
'vue': 'Vue',
'element-ui': 'ElementUI',
}
main.js
Vue.use(ElementUI, {
size: 'small'
});
不知道为什么 写成ElementUI不行，写成ELEMENT就可以