当前位置: 首页 > 工具软件 > laravel-mix > 使用案例 >

laravel-mix vue几个项目前端可以共用代码, 打包多个js

阳兴朝
2023-12-01

最近在做的一个项目vue构建,使用laravel-mix打包

解决方案:上代码

##### 在laravel根目录下面有 webpack.mix.js 文件

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

const { env } = require('minimist')(process.argv.slice(2));
if (env && env.pay) {
    mix.js('resources/assets/js/app.js', 'public/js/pay')
        .sass('resources/assets/sass/app.scss', 'public/css/pay')
        .version();
    return;
}

if (env && env.gm) {
    mix.js('resources/assets/js/gm.js', 'public/js/gm')
        .sass('resources/assets/sass/app.scss', 'public/css/gm')
        .version();
    return;
}



#### package.json文件,修改scripts 中参数:
比如要打包 pay 则执行  
npm run dev -- -- env.pay   //这样,这个参数就会带到webpack.mix.js 中,通过在webpack.mix.js 判断env的值然后打不同的文件

或     直接修改打包脚本,直接执行 npm run dev:pay
"scripts": {
    "dev:pay": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.pay"
}

下来直接运行npm run dev-admin就能打包后端资源

注意:
当webpack.mix.js及webpack.pay.js没有指定不同的mix.setPublicPath(path)时,默认的打包文件都会放到/public目录下,这样每次打包都会覆盖mix-manifest.json的值。

 类似资料: