vue 报错总结

build后页面空白
背景图片的引用
打包后样式缺失
scoped 应用
回到顶部
IE兼容
webpack 调试代码

build打包之后页面空白：

一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，
因为把配置的static文件夹当成了根路径，
那么要解决这种问题，就得引用相对路径。

解决办法

打开webpack.prod.conf.js

找到output：增加 publicPath: './', 即可，如图。

image

vue 3.0 打包出现这个问题需要在根目录添加 vue.config.js文件
添加如下配置即可

module.exports = {
    baseUrl: './'
}

背景图片的引用问题

webpack打包在会把图片转换成base64，在设置里面，limit超过10000就不会转换，不管事调大limit还是压缩图片都不能很好的满足需求。

上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，
不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，
背景图片资源是通过css加载的，
如background: url("../../assets/images/logo-index.png") no-repeat;
被相对打包后变成了
url(static/img/logo-index.2f00bf2.png) no-repeat
所以我们要保留css引用图片的正常路径，即：
url``(../../``static``/img/logo-index.``2``f``00``bf``2``.png) ``no-repeat

添加如图所示的一行代码，这样不论是字体还是图片的引用问题都能解决。

image

来源https://www.cnblogs.com/moqiutao/p/7496718.html

打包后样式缺失

需要package.json 修改 browserslist

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "last 10 Chrome versions",
    "last 5 Firefox versions",
    "Safari >= 6",
    "not ie <= 8"
  ]

scoped 应用

scoped 可以将样式变为私有但是有些样式文件不要加

第三方库
覆盖样式

回到顶部

IE打开 vue 项目为空白页

原因是有些第三方组件对 IE 支持不好
比如 swiper 是的就是 swiper

另外 babel 默认的设置转码为 env
但是有的 API 还是没有转
这就需要引入 babel-polyfill
具体内容文档里都有

首先安装

npm install --save babel-polyfill

入口文件引用

import "babel-polyfill";

webpack.config.js 文件修改入口配置 (使用 vue-cli 2.x 的话修改 webpack.base.conf.js)

entry: {
    //app: './src/main.js'
    app: ["babel-polyfill", "./src/main.js"]
  },

一般提示语法问题都可以解决
注意：如果不能解决八成就是第三方库的问题

webpack 调试代码问题

一般使用vue cli 工具
调试代码你可能需要准确地知道错误来自于哪个源文件
但是默认配置的报错信息不能定位到具体位置
经过查找 webpack文档
可以更改 webpack的配置 webpack.config.js
(使用 vue-cli 2.x 的话修改 webpack.dev.conf)

devtool: 'inline-source-map',

vue部署 nginx 路由路径打开404

server {
        listen 8888;
        listen [::]:8888 default_server ipv6only=on;
        server_name xingkongs.club;
        root /root;
        index index.html index.htm;

        location / {
                try_files $uri $uri/ @router;
                index index.html;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
}

vue 报错总结