使用laravel-mix在传统页面上使用vue组件总结

83 阅读 0 评论 55 点赞

我是靠谱客的博主甜美海燕，最近开发中收集的这篇文章主要介绍使用laravel-mix在传统页面上使用vue组件总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用laravel-mix在传统页面上使用vue组件

- 起步
- 自定义字体路径
- 使用CDN
- 自动更新资源版本号
- 通用页面打包
- 提取通用组件
- 完整代码

laravel-mix是laravel框架下前端助手，方便使用vue、react等。

功能强度大，目前仍在持续更新，这里使用最新laravel 6.x，也就是长期支持版中的laravel-mix总结使用过程中遇到的问题及解决办法。以iview的UI库为例。

无论是否使用laravle框架都可以使用的。

起步

安装最新的node LTS，也就是node 14。

使用镜像：npm config set registry https://registry.npm.taobao.org

下载package.json:

https://github.com/laravel/laravel/blob/6.x/package.json

安装依赖：
npm install

安装iview和vue：
npm install view-design -D
npm install vue -D

创建一个简单的welcome页面，里面就一个welcome组件，详见完整代码

创建文件webpack.mix.js:

const mix = require('laravel-mix');

mix.setPublicPath('/public');
mix.js('src/resources/js/welcome.js', 'js');

打包测试：npm run dev

 DONE  Compiled successfully in 2277ms                                                                      下午10:39:31

                                                                               Asset      Size       Chunks             Chunk Names
                                                                      /js/welcome.js  2.37 MiB  /js/welcome  [emitted]  /js/welcome
  fonts/vendor/view-design/dist/styles/ionicons.svg?a2c4a261a239aa84463dc70e4bac9b9a   542 KiB               [emitted]
  fonts/vendor/view-design/dist/styles/ionicons.ttf?d535a25a79fb1365ae814b61e88fae71   193 KiB               [emitted]
fonts/vendor/view-design/dist/styles/ionicons.woff2?143146fa24554ae2c5ac0a3982abb952  80.3 KiB               [emitted]
 fonts/vendor/view-design/dist/styles/ionicons.woff?99ac3308dd8ee14f749f51538d0d5b9e   193 KiB               [emitted]

自定义字体路径

虽然可以使用，但fonts路径非常长，而且有时候，配置错误导致找不到。

有两种方式，一种是直接不处理css中的url，虽然有选项processCssUrls，但这个版本不支持css中使用这个选项，sass等可以。

将node_modules/laravel-mix/src/components/Css.js中第13行importLoaders: 1后加上, url: false

第二种是重写webpack配置，可以在其中自定义fonts路径：

mix.override(function (webpackConfig) {
    webpackConfig.module.rules[2] = {
        test: /(.(woff2?|ttf|eot|otf)$|font.*.svg$)/,
        loader: 'file-loader',
        options: {
            name: path => {
                return Config.fileLoaderDirs.fonts + '/[name].[ext]?[hash]';
            },
            publicPath: Config.resourceRoot
        }
    };
});

使用CDN

可以看到打包成功，但包很大，其中有vue，iview等，如果使用CDN就好了

配置webpack的externals属性即可使用全局window的vue和iview

mix.webpackConfig({
    externals: {
        vue: "Vue",
        iview: "iview",
    }
})

同时welcome.js中注释掉iview和iview.css相关的代码，在页面上加上CDN的vue和iview资源

DONE  Compiled successfully in 1240ms                                                                      下午10:55:14

         Asset      Size  Chunks             Chunk Names
/js/welcome.js  2.18 KiB       0  [emitted]  /js/welcome

可以看到npm run prod后，只有2KB，效果相当明显。

自动更新资源版本号

已经可以很好的使用了，但是更新代码时，浏览器有缓存，需要加上打包文件的版本号。

if (mix.inProduction()) {
    mix.version();
}

再次运行，可以看到public目录中已经有了mix-manifest.json，里面记录着资源的版本号。

为了正则匹配方便，这里页面的名字和js名字相同，都为welcome。

mix.then(function (stats) {
    if(mix.inProduction()){
        var manifest = fs.readFileSync('public/mix-manifest.json', 'utf8');
        var htmlContents = fs.readFileSync('public/welcome.html', 'utf8');
        var reg = new RegExp('\/js\/welcome.js[^"']*');
        var newContents = htmlContents.replace(reg, JSON.parse(manifest)['/js/welcome.js']);
        fs.writeFileSync('public/welcome.html', newContents, 'utf8');
    }
});

可以看到welcome.html中已经有了：
<script src="/js/welcome.js?id=9e68f0bd505dc4dd4218"></script>

通用页面打包

现在mix只能处理welcome页面，如果要打包about页面就需要另外重写

可以使用npm scripts接受页面的名字，实现根据参数不同打包不同页面

npm run通过--可以添加自定义参数

例如: npm run production -- --page welcome，mix脚本就可以接受到page参数

简写的需要添加两个--，因为第一个--传递给脚本时消耗了

npm run prod -- -- --page welcome

通过minimist可以获取优雅的参数键值对。

var minimist = require('minimist');

var args = minimist(process.argv.slice(2));
var page = args.page;

将脚本中welcome换成page参数即可。

提取通用组件

页面很多以后难免有重用的，提取到一个js中可以减少资源大小，充分利用缓存。

以前使用CommonsChunkPlugin，这个现在已经废弃了。

mix.webpackConfig({
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    }
});