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']]
}
复制代码