Vuecli prerender-spa-plugin Seo优化+nginx反向代理练习随笔

本文介绍自己使用vue全家桶和prerender-spa-plugin进行seo优化使用nginx解决跨域的过程。

1.所需环境及插件

1.vuecli2.x
2.axios（代替ajax）
2.prerender-spa-plugin（预渲染，用于SEO优化，具体介绍请自行百度）
3.negix

2.开始操作

当使用vuecli创建一个项目，完成所需项目后进行本地打包（此时使用的路由是默认的hash模式），浏览器打开dist文件夹下index.html文件一切正常（如果出现页面空白或者背景图没有引入请自行百度）。
在浏览器里看着地址栏的#号确实不爽，并且进行seo优化必须把路由设置为history模式。

3使用prerender-spa-plugin预渲染进行seo优化。

seo是什么在这里不做过多的解释。seo优化有两种方式，一种是本文介绍的使用prerender-spa-plugin进行预渲染。另一种是官方给出的ssr服务器渲染。两者各有优缺点。
废话不多少，开始改造我们的项目。首先要保证这个项目是正常运行的。
1.安装prerender-spa-plugin插件：npm install prerender-spa-plugin -D;prerender-spa-pluginan的安装比较耗时因为要依赖
phantom js所以耐心等待一会。
2.安装完成后打开build文件夹下面的webpack.prod.conf.js文件进行改造。
首先引入prerender-spa-plugin插件

var PrerenderSpaPlugin = require('prerender-spa-plugin')

然后在plugins里增加如下代码

new PrerenderSpaPlugin(
// 生成文件的路径，此处与webpack打包地址一致
path.join(config.build.assetsRoot),
// 配置要做预渲染的路由，只支持h5 history方式
[ '/index', '/introduce','/news','/partner','/contact']
)

就是这么简单就配置好了。有些人说还需要增加Renderer模块不然不会预编译，但是最基本的这样配置是可以满足需求的，高级的配置慢慢摸索吧。
3.由于预渲染只支持history模式，所以要把router的配置文件改为

mode: 'history'

4.config文件夹下的index.js也改回默认的资源路径

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to true, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// npm run build --report
// Set to true or false to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}

5.执行 npm run build打包。
这时发现build文件夹下多出了好几个文件夹，每个文件夹对应着一个路由，用浏览器打开index.html正常再点击路由跳转是发现找不到页面了。因为是在本地打开的在路由跳转时找到了本地资源的根路径，当然找不到页面了。所以接下来我们使用nginx来搭建一个本地服务器。顺便来解决跨域的请求

4.搭建nginx服务器

1.首先如何下载以及安装本文不做过多讲解。按照其他论坛搭建好之后输入http://localhost:8080（端口名可以通过配置文件配置，稍后会讲到）可以正常访问那么离成功就只有一步之遥了。
2.找到nginx所配置网站的根目录，把dist文件夹里的文件复制到网站的根目录里（注意，是dist文件夹里所有的内容，不是dist文件夹，如果想直接放dist文件夹需要改路由的base值还有build的配置。有兴趣的可以研究）这时再次访问http://localhost:8080发现页面可以完美运行。

5.使用nginx反向代理解决跨域

这里使用Mob官网的api接口进行测试。请求方法使用的axios代替ajax。这时如果想访问一个链接

Mob官网

this.$axios({
method: 'get',
url:'http://apicloud.mob.com/appstore/marriage/day' ,
params:{
key:'******',//去mob官网申请appkey
menDate:'1987-04-26',
menHour:'10',
womanDate:'1992-03-18',
womanHour:'11'
}, // get 请求时带的参数
timeout: 5000,
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
}).then((res) => {
console.log(res)
})

这样访问肯定会报跨域的错误。所以我们要改nginx配置进行一次转发。
1.找到nginx安装目录的nginx.conf文件，修改里面的server配置

server {
listen 8080;#自定义端口
server_name localhost;#自定义域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
#这个配置可以解决跨域，重写api的地址，所以项目中也要改动
location /api {
rewrite ^.+api/?(.*)1 break;
include uwsgi_params;
proxy_pass http://apicloud.mob.com;#需要转发的域名
}
#error_page 404 /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 {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_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 {
# deny all;
#}
}

2.访问方法改成

this.$axios({
method: 'get',
url:'/api/appstore/marriage/day' ,//注意url前面去掉了域名，前面加上了/api
params:{
key:'****',
menDate:'1987-04-26',
menHour:'10',
womanDate:'1992-03-18',
womanHour:'11'
}, // get 请求时带的参数
timeout: 5000,
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
}).then((res) => {
console.log(res)
})

到了这里重新打包后放在网站的根目录下运行发现可以访问到了该api。
3.在开发环境解决跨域。
上面说的是生产环境，那么在开发环境如何解决跨域呢？总不能写一个接口打一次包吧，那太麻烦了，所以也可以更改一个配置文件可以在开发模式进行跨域访问。
找到config下的index.js。更改dev的配置

dev: {
env: require('./dev.env'),
port: 1127,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false,
proxyTable: {
'/api':{
target:'http://apicloud.mob.com',//需要跨域的域名
changeOrigin:true,
pathRewrite:{
'/api':''"//重写的api
}
}
},
}

这样一来在开发环境也完美的解决了跨域。
文本也是小白调试的一点方法，更多的原理以及配置希望大家慢慢摸索。