Vue从入门到精通（6）--第四阶段（中）：填坑

第四阶段（中）

1. 去除Eslint验证
2. 添加静态js和css文件
3. 打包选项

---

1、去除Eslint验证

    vue-cli中使用了Eslint代码验证，这种验证邀请你的代码必须符合一定的规范，这个规范严格到你的代码缩进不标准时，都会编译不通过，这在开发过程中是很不方便的，毕竟每个人的代码习惯并不相同。可以在webpack.base.conf.js里删掉如下配置项来禁用Eslint验证

preLoaders: [      {        test: /\.vue$/,        loader: 'eslint',        include: projectRoot,        exclude: [/node_modules/, /ignore_lib/]      },      {        test: /\.js$/,        loader: 'eslint',        include: projectRoot,        exclude: [/node_modules/, /ignore_lib/]      }    ]

---

2、添加静态js和css文件

<1> 如果你的网站是单页面，且要加载的js文件中的类在大部分vue组件/路由中都用得到，则直接将js文件放在与src同级static目录下，并在html中使用script标签引入就行。

<2> 如果只在部分组件或某一个路由中使用，想要动态的加载组件，则首先模块化该组件的代码，在使用时通过import导入。
    网上大多的第三方JS文件使用闭包的形式打包，将其改为AMD、CommonJS或者ES6的模块化封装模式，即将全局对象JSModel写成如下：

    commonJS

module.exports=JSModel;

    AMD

define([], function () {'use strict';return JSModel;});

    然后在组件中使用如下方式导入即可：

 import JSModel from 'js文件的路径'

    文件的位置可在src和static中，只要引用路径对即可。

---

3、打包选项

<1> 关闭sourceMap
    默认的打包选项开启了sourceMap的功能，该功能在编译出得js文件上增加了一个map文件，同时在html中添加了对该文件的引用。其作用是在运行压缩后的代码出现异常时，在debug模式下可以轻松的找到出现问题的代码所对应的源码的位置。
    
    sourceMap文件比实际运行的js文件要大很多，而这些文件对用户而言并不是必须的，因此可以关闭他们，关闭方法如下：

    设置config文件夹index.js中productionSourceMap的值为false，也就是设置webpack配置中devtool为false，打包后文件体积可以减少百分之八十！实际上是去掉dist文件夹中，最终生成的css/js文件中的map相关文件。
    

<2> 打包文件中js、css等的版本控制
    如果没有较大的项目结构改动，每次编译完成的js文件名都是相同的一些随机字符串，这很容易造成浏览器的缓存而导致最新的代码功能体现不出来，可以在配置文件中为打包生成的html中引用的js、css文件路径添加随机码，具体操作如下：
    
    设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true，即会使打包生成的index.html中的js和css路径带有”?随机字符串“，如下图所示：
    

<3> 关于Vendor
    所有位于node_modules中的，并且作为项目发布使用的第三方包（在package.json的dependencies项中）最终都会被压缩到vendor.js文件中。这个文件编译后最终可能会达到1M以上的体积，做web移动端的朋友需要注意下这个文件。
    

<4> build路径相关问题

    坑1：npm run build：打包后css、js、图片文件404

    
    原因
    这些资源文件的路径都是”/static/…”，而/表示根目录，而非当前目录。
    
    解决方案
    修改config/index.js下 build中的assetsPublicPath，从’/’改为’./’ 但是这样又导致一个问题，所有在css中定义的background中的url图片都找不到，最终dist目录中，图片都位于static/img目录下，而css文件中的路径是“static/img/name.jpg”,由于css这里使用相对路径，导致最终在浏览器中定位路径为static/css/static/img/name.jpg。

    由于vue-cli的url的loader，默认会把css都放在dist/static/css目录下，而css文件中的url都会强制写成../static/img/name.jpg路径，所以修改路径暂时无解。

    坑2：build后，css中background的图片均404

    
    原因
    webpack调用loader的时候没有考虑相对路径在html和css文件的差异问题，导致是否提取css文件为独立文件都是用同样的相对路径。

    该问题在github上有专门的issue，貌似也没有完美的解决方案：
    1、https://github.com/vuejs-templates/webpack/issues/208
    2、https://github.com/vuejs/vue-cli/issues/112

    在vue-cli那篇issue中，一些不完全的解决方法包括：

    方法1（by https://github.com/KSOra）
    在build的时候修改webpack配置文件的output.publicPath项，最后build生成的css图片url是根据publicPath和url-loader的配置生成的，比如

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
}
{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url',
    query: {
        limit: 10000,
        name: 'image/[name].[ext]?[hash]'
    }
}

    那么最后生成的url路径就是/dist/image/[name].[ext]?[hash]，即publicPath + query.name，结合你工程的具体情况配置一下吧，如果方便的话建议还是不要随意修改publicPath，修改后hot-reload可能会出现问题。

    方法2：（by：https://github.com/xierenyuan）
    重写url-loader和file-loader
    我也遇到了这个问题,搞了半天最后我无耻的 把loader 重写 替换了下路径. 我发布在npm 呢https://www.npmjs.com/package/u-loader 使用 使用

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'u',
    query: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}, {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'u',
    query: {
         limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

    注：这个方法修改后，css中的background图片没问题了，但是html中的img标签的的src图片又错了。而且由于重写的代码中依赖“static”目录，导致如果你修改了assets相关的path，则仍然会build出错。

    以上问题最有效的解决方法

    对于需要将css文件单独打包的，至今没有完美的解决办法。也有人推荐所有图片使用http路径，从而防止file-loader的错误解析。网上还有很多其他的解决方法，由于水平有限，至今没找到完美的解决方案，如果你找到了，欢迎告诉我。