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);
    }
}

手赚鸭会员

打赏 收藏 海报 链接