vue项目打包时踩的坑

1. vue项目打包后页面出现空白页面
   在config文件夹下index.js中：
   dev对象中的assetsPublicPath修改为’./’
   build对象中的assetsPublicPath修改为’./’
   在build文件中，webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码publicPath:’./’

output: {     //在这里加一行代码       publicPath:'./',     path: config.build.assetsRoot,     filename: utils.assetsPath('js/[name].[chunkhash].js'),     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')   },

在utils.js中， 第47行左右 有一个if判断为 if (options.extract),在这里面增加一行代码（是为了图片加载）publicPath:’…/…/’

 if (options.extract) {       return ExtractTextPlugin.extract({         publicPath:'../../',         use: loaders,         fallback: 'vue-style-loader'       })     }

**注意：**如果修改完还是白页，看route.js的mode是不是history模式，history模式可以去掉#，但是需要后端设置配合使用。删除mode定义，使用默认模式即可。
2.vue项目打包时报错
错误：Cannot read property ‘matched’ of undefined"
错误原因：在new Vue()的实例中对路由名称的识别是唯一的，所以路由定义需要修改为【router】

const router = new VueRouter({   routes: [     {       path: '/apple',       component: Apple     },     {       path: '/banana',       component: Banana     }   ] }) new Vue({   el: '#app',   router,   components: { App },   template: '<App/>' })

3. vue项目打包后跨域请求报错
开发环境：

// config文件夹下的index.js中dev中添加 proxyTable: {       //做一个接口的代理       '/pay_api': {   // 拦截转发路径，名字可以任意取，注意前面斜杠；         target: 'http://ip地址:端口',   //代理目标网址；         changeOrigin: true,   //允许跨域         pathRewrite: {           '^/pay_api': ''   //重写路径         }       }     }

this.$axios.post('/pay_api/接口',{ 	fileName: fileName  // 请求参数 	}).then((data) => { 		//请求完成 	})

生产环境：（跨域由后端解决）

import axios from 'axios' Vue.prototype.$axios = axios; axios.defaults.baseURL = "http://ip地址:端口"

this.$axios.post('接口',{ 	fileName: fileName  // 请求参数 	}).then((data) => { 		//请求完成 	})

import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter;  @Configuration public class CorsConfig {     @Bean     public CorsFilter corsFilter() {         //1.添加CORS配置信息         CorsConfiguration config = new CorsConfiguration();         //1) 允许的域,不要写*，否则cookie就无法使用了         config.addAllowedOrigin("*");         //2) 是否发送Cookie信息         config.setAllowCredentials(true);         //3) 允许的请求方式GET POST等         config.addAllowedMethod("*");         // 4）允许的头信息         config.addAllowedHeader("*");         config.setMaxAge(3600L);          //2.添加映射路径，我们拦截一切请求         UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();         configSource.registerCorsConfiguration("/**", config);          //3.返回新的CorsFilter.         return new CorsFilter(configSource);     } }