vue 打包部署在 nginx服务中，以及出现的一些问题

首先来说操作步骤

前提：

1、你已经安装/下载好 nginx 

2、你的vue 项目已经打包完成，并得到了 dist 文件夹

部署开始：

1、vue 项目打包，在控制台输入 npm run build 等待打包结束后可在项目的同级目录下得到打包文件夹 dist ，中包含了我们要部署的 index.html 文件

2、将下载好的 nginx 压缩包 解压后，在文件夹地址栏输入 cmd 后回车 后可以直接打开文件路径，

3、在窗口命令行中输入 nginx 启动指令： start nginx 然后浏览器打开 127.0.0.1:8080 即可检查nginx 有没有启动成功

浏览器显示 Welcome to nginx! 表示启动成功

4、在nginx 中配置vue 访问 

        4-1、将上面打包好的dist 文件夹复制到nginx 目录下的 html 文件夹中

        4-2、然后打开 nginx 目录下的 conf 文件夹下的 nginx.conf 文件（记事本打开）

        4-3、添加如下配置        

# 前端页面地址
location /rw {
	alias   html/dist; #静态资源访问地址，使用alias 配置
	index index.html index.htm;
}

5、打开浏览器输入127.0.0.1:8080/rw 即可查看是否加载成功，

==============================华丽分割线================================

常见问题

1、vue 打包部署后浏览器显示 js 、css 等静态资源找不到问题

        方案：

在 vue 项目中，打开config 文件夹下的 index.js 配置，找到 assetsPublicPath 设置为assetsPublicPath: './'，即可

 2、部署后访问后台显示是以nginx的地址作为访问域名的问题，即访问域名错误问题

        方案：

        a、vue 上配置所有请求地址前加一个前缀 '/rng' （以下为vue解决跨域配置，开发时的配置）

代码段：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/rng': {
        target:'http://127.0.0.1:9090', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/rng': ''  // 替换target中的请求地址，也就是说以后你在请求http://127.0.0.1:9090/这个地址的时候直接写成/api即可。
        }
      }
    },
},

请求地址则修改为（重点！重点！重点！）：请求前加配置前缀

        b、nginx 上配置如下，解析后台的前缀，并转发到后台服务地址上

代码段：

# 后台请求转译
location /rng/ {
	rewrite ^/rng/(.*) /$1 break; 
	proxy_pass http://127.0.0.1:9090; #后台服务地址
}

3、在部署好后打开页面显示一片空白，脑瓜子嗡嗡的，html页面加载空白问题

        方案：vue 中若配置了去除#号的配置，则删除路由配置中index.js 的 mode: 'history',//去掉#号  设置，（原来配置mode: 'hash', 也可以）

4、项目中引入了element ui 插件，所以可能会出现，字体文件找不到，造成有些样式显示错误，即element 的静态资源引入错误

        错误提示：

        方案：

        a、检查build文件夹下的 webpack.base.conf.js 有没有把 woff 之类的文件加入到fonts文件夹下，如果没有则添加上（正常都有）

        代码段：

{
	test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
	loader: 'url-loader',
	options: {
	  limit: 10000,
	  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
	}
},

        b、在build文件夹下 的 utils.js 中添加如下配置，即 publicPath: '../../'