vue.js打包部署上线

我们使用cnpm run dev
运行项目，只是在本地开发环境中进行测试，一旦将项目部署到服务器上就会出现各种问题，如axios请求跨域、css样式失效、图片失效、地址跳转404等一系列问题。。。这里主要简单介绍一下解决方案

需求：将项目成功打包部署到linux下，能成功访问到页面。

步骤一：把绝对路径改为相对路径,打开config/index.js 会看到一个build属性，这里就我们打包的基本配置了。你在这里可以修改打包的目录，打包的文件名。最重要的是一定要把绝对目录改为相对目录。修改config index.js文件中的打包配置

步骤二、修改build.下的utils.js (解决css背景图片失效问题)
增加 publicPath:'../../',

由于项目打包之后，所有的js，css，图片都会在各自统一的文件夹内，所以，之前的路径需要改掉，单个修改花费时间太长，那么应该怎么做呢。

打开build文件夹里面的utils.js，根据需求添加，通常会添加两个../。

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath : '../../'  //新添加的内容，路径配置
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

步骤三：打开项目中config文件夹里面的prod.env.js 文件，将后端给的线上路径填入。

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://sdk.*********.cn:3838/"' //线上路径
}

步骤四、进入vue项目根目录下使用命令 cnpm run build 打包项目，成功后会出现dist文件夹，里面含有static文件夹、index.html

步骤五、将生成的dist下文件复制到服务器下的对应文件夹下，然后进行访问

1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ，打包后文件体积可以减少百分之八十

2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true，即会使打包生成的index.html中的js和css路径带有？+随机字符串，也就是版本控制

二、axios跨域问题
方式1：服务器端设置跨域

header(“Access-Control-Allow-Origin:*”); 
header(“Access-Control-Allow-Headers:content-type”); 
header(“Access-Control-Request-Method:GET,POST”); 

方式2：在config下index.js中设置一个代理服务器，使用proxyTable 我比较推荐这种方法。
首先在config/index.js 里面找到proxyTable ：{} ，然后在里面加入

 '/api': {
        target: 'http://71.158.4.120:8080/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
                //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调
                //用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
     }

参考：