vue中常碰见的坑_vue项目遇到的坑

1.mounted钩子函数中请求数据导致页面闪屏问题

其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了

2.npm run build 后，部署网页到服务器，出现404错误

vue项目默认配置是打包后放在服务器根目录下，所以如果要部署在子目录下则会报404错误。这种情况就需要做如下修改

// vue.config.js 中，修改以下语句

module.exports = {

// 使用相对路径引用 js、css 等资源

publicPath: "./"

// 或者通过这种方式: /你的子目录地址名称/,如下

// publicPath: "/myapp/"

}

复制代码

如果是vue-cli2 则找到 build/config/index.js，代码如下：

build: {

// 访问路径，修改成绝对路径

assetsPublicPath: '/myapp/'

}

复制代码

这种情况需要注意的是，在router里要加上你的子目录地址名称,如下

new Router({

base: 'myapp',

// ...

})

复制代码

3. 本地开发跨域问题

本地开发时，一般都需要跨域。如果用vue-cli3搭建的项目，可以在根目录的 vue.config.js 文件中，修改 proxy 或 proxyTable 属性。

// vue.config.js

module.exports = {

devServer: {

proxy: {

'/api': {

target: 'http://yoururl.com', // 填入实际的服务器接口

ws: true,

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

},

}

},

};

复制代码

4.部署的生产环境上后和开发环境的样式不一样

产生这种情况的原因是全局样式或外部ui库样式的引入在路由引入之后，导致再组件内不修改的样式不起作用,只需要将全局样式引入置于路由引入之前

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import router from './router'

复制代码

5. IE9 10页面空白不显示问题

安装babel-polufill

npm install babel-polufill --save

复制代码在main.js引用

// main.js

import 'babel-polyfill'

复制代码在index.html里添加如下代码

复制代码修改webpack配置

// vue cli3 vue.config.js

module.exports = {

transpileDependencies: ['webpack-dev-server/client'],

chainWebpack: config => {

config.entry.app = ['babel-polyfill', './src/main.js'];

}

}

// vue cli2 webpack.base.conf.js

entry:{

app:['babel-polyfill','./src/main.js']]

}

复制代码