vue项目遇到的坑

1,204 阅读2分钟

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里添加如下代码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • 修改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']]
}