0.前言
经过一段时间的探索，前端后端都有大致的样子了。下面就是部署到服务器，让我的博客项目公布在网上啦~~
1.前端部署
1.1服务器准备
Nginx环境
后端接口——想要完全的效果提前部署好
1.2前端打包准备
终端运行命令 npm run build
其实它就是个静态文件，在哪访问都一样
1.2.1 静态路径问题
点击index.html，通过浏览器运行，出现以下报错，如图
具体步骤如下：
1、找到配置文件
修改
2、找到配置文件
修改
3、终端运行 npm run build 即可。
此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。
1.2.2不报错但也不显示任何页面
出现原因：
router文件夹内部的index.js的mode模式导致
hash模式会带来#，很丑，想去调#可以改成history
1.开发阶段history模式不会有#，但是打包上线后，需要后端帮忙指定项目根目录
2.hash模式可以不需要后端帮忙，只会多个#而已
如何解决：
1.注释或换成hash模式
2.使用Nginx，修改Nginx配置来映射路径
1.3修改Nginx配置
2.解决发现问题
2.1点击文章详情发现我static里的图片加载404
看路径是多了一层/show
history模式导致，把下图的./改回/；再重新部署，就是在本地直接打开会报资源找不到
2.2vue打包生成的文件的js文件过大的优化
2.2.1去掉生成map文件
打包时会生成map文件，而map文件通常都比较大，可以取消生成map文件
config/index.js找到productionSourceMap把true改成false
2.2.2代码压缩
config/index.js 找到 productionGzip 把 false 改为 true
安装插件
npm install compression-webpack-plugin --save-dev
在根目录新建文件vue.config.js
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
publicPath: '/',
lintOnSave: false,
devServer: {
open: true, // 运行项目时，是否自动开启新窗口。
host: '127.0.0.1', // 手机测试端口号。//主机名字 locahost 或 127.0.0.0 或 真机测试 0.0.0.0
port: 3000, // 默认端口号
},
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@i': path.resolve(__dirname, './src/assets'),
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 下面是下载的插件的配置
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
}),
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/home', '/login', '/interviewList', '/interviewDetail'],
renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
renderAfterTime: 5000
})
})
]
}
}
修改Nginx配置文件在http全局里开启gzip
配置后实测不生效，经过一翻排查，问题最终锁定在了gzip_types类型上，确保覆盖了你希望压缩的文件类型
全部Nginx配置文件内容：
user www www;
worker_processes 2; #设置值和CPU核心数一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
use epoll;
worker_connections 65535;
}
http
{
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" $http_x_forwarded_for';
#charset gb2312;
server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 8m;
sendfile on;
tcp_nopush on;
keepalive_timeout 60;
tcp_nodelay on;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 128k;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
#limit_zone crawler $binary_remote_addr 10m;
#下面是server虚拟主机的配置
server
{
listen 80;#监听端口
server_name localhost;#域名
index index.html index.htm index.php;
root /usr/local/webserver/nginx/html;#站点目录
location ~ .*\.(php|php5)?$
{
#fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
location ^~ /api {
proxy_pass http://39.108.141.221:2716/;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
if ($request_method = OPTIONS ) {
return 200;
}
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
expires 30d;
#root /static/img;
# access_log off;
}
location ~ .*\.(js|css)?$
{
expires 15d;
# access_log off;
}
access_log off;
}
}