vue-cli 第二章 （常见问题修正）

一、编译打包多出 *.map 文件处理

 

当执行 npm run build 后根目录下会编译出一个 dist 的文件夹，如下：

 

 

其中 css 和 js  文件夹下会多出一些 *.map 的文件，这些是没用的，如何在编译过程中进行排除？

 

修改，根目录 --> config --> index.js 找到 

 

# 将以下配置改为 false
{
    cssSourceMap:true,
    productionSourceMap:true
}

 

二、IE 页面空白问题，并且报错

 

[object Error] {description:"“Promise”未定义",message:"“Promise”未定义",name:"ReferenceError",number:-2146823279,stack:"ReferenceError"}

 

主要是 IE 对 ES6  的 Promise 支持不好，解决如下：

 

# 安装 babel-polyfill
npm install --save-dev babel-polyfill

# 在 App.vue 文件中引用
import "babel-polyfill";

# 在 build --> webpack.base.js 中使用
# 修改
entry{
    app:'./src/main.js'
}
# 为
entry{
    app:['babel-polyfill','./src/main.js']
}

 

Promise 资料：

https://babeljs.io/docs/usage/polyfill/

https://blog.csdn.net/u011500781/article/details/53055856

https://www.cnblogs.com/wonyun/p/8076453.html

 

三、IE  下路由警告

 

在 IE 下运行时，控制台会打印出一段路由警告：

 

[vue-router] Named Route 'shared' has a default child route. When navigating to this named route (:to="{name: 'shared'"), the default child route will not be rendered. Remove the name from this Route and use the name of the default child route for named links instead.

 

在 vue 项目中使用了 Vue-Router ，当某个路由有子路由时，写法如下：

 

 

如果是如上写法，就会报出警告。

 

解决办法：因为当某个路由有子路由时，这时候父级路由需要一个默认的路由，所有父级路由不能定义 name 属性，即把父级路由的 name 属性删除即可。

 

相关资料：

https://forum.vuejs.org/t/vue2-0-ie11/13491

 

四、jQuery 的引用

 

# 安装 JQuery
npm install --save-dev JQuery

# 在根目录 build --> webpack.base.js
var webpack=require('webpack')
module.exports={
    plugins:[
            new webpack.ProvidePlugin({
                "$":"jquery",
                "jquery":"jquery",
                "windiw.jQuery":"jquery",
                "jQuery":"jquery"
            })
        ]
}

五、路由的引用

 

路由优化，按需加载组件，使用 webpack require.ensure

 

使用 vue-cli 构建的项目，在默认情况下，执行 npm run build 会将所有的 js 代码打包为一个整体。

 

打包位置 dist/static/js/app.[contenthash].js。

 

类似下面的路由代码：

 

# router/index.js 路由相关信息，该路由文件引入了多个 *.vue 组件
import Hello from "@/components/Hello";
import Province from "@/components/Province";
import Segment from "@/components/Segment";
import User from "@/components/User";
import Loading from "@/components/Loading";

 

执行 npm run build 会打包为一个整体 app.[contenthash].js，这个文件是非常大，可能几兆或者几十兆，加载会很慢

 

 

 

所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk 块中去。

 

分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk 名。

 

相同 chunk 名字的模块将会打包到一起。

 

如下代码：

 

# router/index.js 修改为懒加载组件
const login = r => require.ensure([], () => r(require('./components/login/login')), 'login');
const shared = r => require.ensure([], () => r(require('./components/shared/shared')), 'shared');
const home = r => require.ensure([], () => r(require('./components/home')), 'home');
const modal = r => require.ensure([], () => r(require('./ui/modal')), 'modal');
const icons = r => require.ensure([], () => r(require('./ui/icons')), 'icons');
const buttons = r => require.ensure([], () => r(require('./ui/buttons')), 'buttons');

 

根据 chunkame 的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个 (除了app.js,manifest.js, vendor.js)。

 

分模块打包之后在 dist 目录下是这样的, 这样就把一个大的 js 文件分为一个个小的 js 文件了,按需去下载,其他的使用方法和 import 的效果一样。

 

 

相关资料：

https://blog.csdn.net/yangbingbinga/article/details/61417689

https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

 

六、vue-cli 脚手架的 .babelrc 文件详解

 

es6 特性浏览器还没有全部支持，但是使用 es6 是大势所趋，所以 babel 应运而生，用来将 es6 代码转换成浏览器能够识别的代码

 

babel 有提供专门的命令工具方便转码

 

{
    // 此项指明，转码的规则
    "presets": [
        // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
        ["env", { "modules": false }],
        // 下面这个是不同阶段出现的es语法，包含不同的转码插件
        "stage-2"
    ],
    // 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译
    "plugins": ["transform-runtime"],
    // 下面指的是在生成的文件中，不产生注释
    "comments": false,
    // 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
    "env": {
        // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
        "test": {
            "presets": ["env", "stage-2"],
            // instanbul是一个用来测试转码后代码的工具
            "plugins": ["istanbul"]
        }
    }
}