Vue前端项目打包，并部署Vue项目到Linux云服务器上
一. vue前端项目打包1.使用vscode开发项目
2.在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，由于这是在现实的部署当中所以必须要在生成环境下举行项目的部署。
如图所示：
https://img-blog.csdnimg.cn/direct/f688ef5adc2e4d608e9ecaf64984cbec.png
3.在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
}
4.终端输入
npm run build
运行此下令行后会自动生成一个dist文件夹，这就是打包后生成的项目文件。之后将此文件夹放到服务器上，路径要与nginx配置路径同等。
https://img-blog.csdnimg.cn/direct/c83373c1aef94891837d65c6801c3b29.png
二. Linux服务器上安装nginx并且举行相干配置
1. 安装必要软件
1.1 使用xshell毗连终端
https://img-blog.csdnimg.cn/direct/0571e263c80d4054b2e9fd44eefe32c9.png
1.2 使用xftp传输文件
https://img-blog.csdnimg.cn/direct/9f90a2d2ef5f4880bac9b7654b6dd40b.png
2. 安装nginx
2.1 下载nginx
（两个方法）
方法一: 下载nginx，然后使用xftp传输到云服务器上
方法二: 下令行下载
http://nginx.org/download/
wget http://nginx.org/download/nginx-1.13.6.tar.gz
2.2 解压nginx安装包
进入nginx目录
tar -zvxf nginx-1.13.6.tar.gz
cd nginx-1.13.6
2.3 make编译安装nginx
./configure --with-http_ssl_module --with-http_gzip_static_module
make
make install
2.4 启动步伐
cd /usr/local/nginx/sbin/
./nginx
2.5 查看运行状态
ps aux | grep nginx
3. nginx 前端项目署理地址配置
（Vue项目设置了当地署理，部署到Nginx上必要使用反向署明白决生产环境跨域问题）
vue项目署理设置
当地署理地址配置文件 config/index.js
proxyTable: {
'/api': {
target: 'https://api.weixin.qq.com', //请求地址
changeOrigin: true, //true表示跨域
secure: false,
ws: true,
logLevel: 'debug',
pathRewrite: {
'^/api': ''
}
},
'/token': {
target: 'http://139.9.xxx.77:8089', //请求地址
changeOrigin: true, //true表示跨域
secure: false,
ws: true,
logLevel: 'debug',
pathRewrite: {
'^/token': ''
}
}
},
nginx署理设置
在/usr/local/nginx/conf目录下配置nginx.conf文件修改内容
（1） 修改root，（root为项目打包后文件的存放路径。）
location / {
root /home/www/dist;
indexindex.html index.htm;
}
（2）设置nginx反向署理（办理生产环境跨域问题），署理样式如下
查看反向署理详细文章了解Nginx反向署理更多信息
location /api/ {
proxy_pass https://api.weixin.qq.com/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
location /token/ {
proxy_pass http://139.9.xxx.77:8089/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
完整配置文件server部门如下
server { listen 8080; server_name localhost; #charset koi8-r; #access_loglogs/host.access.logmain; location / {
root /home/www/dist;
indexindex.html index.htm;
}
#error_page404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504/50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_indexindex.php; # fastcgi_paramSCRIPT_FILENAME/scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # denyall; #} location /api/ {
proxy_pass https://api.weixin.qq.com/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
location /token/ {
proxy_pass http://139.9.xxx.77:8089/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
} 4. conf配置文件的启动
在现实当中服务器中可能有多个vue前端项目，此时我们只要单独修该conf文件即可，一个前端项目对应的一个conf文件。
conf启动下令符如下：
启动项目指定配置文件
cd /usr/local/nginx/sbin/ ./nginx -c conf/nginx_hwfm.conf
查看启动进程：
ps -ef|grep nginx
https://img-blog.csdnimg.cn/direct/d21fcaceadad419984b575bc8a0f9bd1.png
5. nginx别的常用下令
(1)启动nginx:
cd /usr/local/nginx/sbin/
./nginx
(2)查看运行状态
ps aux | grep nginx
(3)停止nginx
./nginx –s stop
(4)检查配置文件是否正确
./nginx –t
(5)查看nginx版本
./nginx -v
(6)配置文件位置
/usr/local/nginx/conf/nginx.conf
(7)拓展（window下nginx启动下令）
cd MyDownloads\nginx-1.15.3
start nginx
nginx -s stop
nginx -s reload
参考链接：https://www.jianshu.com/p/c013027069ce
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]