vue常见问题汇总（一）

---

一、vue打包后显示空白解决

解决方法：
修改一下config下面的index.js中bulid模块导出的路径

module.exports = {
     
  build: {
     
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
 }

assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’;

再次执行 npm run build

二、element小图标不显示

解决方法：
修改biuld下的utils.js，ctrl+f搜索ExtractTextPlugin.extract，修改此代码块

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

三、vue+element打包后样式混乱

原因是main.js中import顺序导致自己写的样式被覆盖
解决方法：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import Vue from 'vue'
import router from './router'

调整下顺序即可

四、url传参变化或者刷新浏览器,页面无变化问题

解决方法:

添加监听事件
watch: {
     
	'$route' (to, from) {
      //监听路由是否变化
		if(to.params){
     // 判断条件1 判断传递值的变化
			//获取数据
			this.getDetail(); 监听地址栏传参数发生变化时执行方法
			console.log(to,this.$route.query.id)
		}
	} 

监听重新获取数据或者使用forceUpdate方法

      this.$forceUpdate(); //获取新数据后刷新dom

五、更换url前进后退无效

解决方法:
1.路由里直接设置history模式

2.hash模式用onhashchange 事件,

mounted () {
     
	// 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件
	window.addEventListener('hashchange', () => {
     
		let currentPath = window.location.hash.slice(1)
		if (this.$route.path !== currentPath) {
     
			this.$router.push(currentPath)
		}
	}, false)
},

五、解决跨域

修改一下config下面的index.js中dev模块

const test = "http://xxx.xx.xx.xx:xxxx"; //apiurl

module.exports = {
     
  dev: {
     

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
     
       '/api': {
     
         target: test, 
         changeOrigin: true, 
         pathRewrite: {
     
           '^/api': '/api'
         }
       },
    },

不加这段代码访问为localhost:8080/api/login,加入后会重定向到http://xxx.xx.xx.xx:xxxx/api/login,若接口为/login,设置里把api去掉即可