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

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

 

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

 

 

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

 

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

 

# 将如下配置改成 false { cssSourceMap:true, productionSourceMap:true }

 

2、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/

http://www.javashuo.com/article/p-hgwiljgc-ev.html

http://www.javashuo.com/article/p-adlztcbb-z.html

 

3、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

 

4、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" }) ] }

 

5、路由的引用

 

路由优化，按需加载组件，使用 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

 

6、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"] } } }