vuejs项目中npm run dll的部署

1、为什么要部署dll

每次运行或打包项目都会重新处理所有的内容，但是并不更改第三方包(vue/jquery/axios等等)，那么dll先打包第三方报，告诉真正的包那些第三方包已经被处理了，下次就不用再打包了。

2、dll部署步骤：

⑴.在build文件下新建一个webpack.dll.js文件，复制以下代码：

const path = require("path")
const webpack = require("webpack")
module.exports = {
    entry:{
        vendor:['vue/dist/vue.esm','vue-router','axios','jquery']
    },
    output:{
        path:path.join(__dirname,'../static/js'),
        filename:'[name].dll.js',
        library:'[name]_library'// 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致
    },
    plugins:[
        new webpack.DllPlugin({
            path:path.join(__dirname,"../static/js/vendor-manifest.json"), // 本Dll文件中各模块的索引，供DllReferencePlugin读取使用
            name:"[name]_library"
        })
    ]
}

⑵.在webpack.prod.conf.js中的plugins下面添加以下代码：

new webpack.DllReferencePlugin({
   context:path.join(__dirname,".."),
   manifest:require("../static/js/vendor-manifest.json")
}),

⑶.在package.json文件中的scripts最后面添加以下代码：

"dll": "webpack --config build/webpack.dll.js"

最后运行npm run dll

这时你会发现在/static/js下面有2个关于vendor的文件。这就完成了！

进入前端入门建站教程官网入口

解决vuejs应用在nginx非根目录下部署时强制刷新404

Vuejs打包后部署到子目录下路径问题解决方法

VUEJS-安装

vuejs实现全站可配置

标签： dll, static, 部署

上面是“vuejs项目中npm run dll的部署”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2116.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！