今天就跟大家聊聊有关怎么在WebPack中配置vue多页面,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
项目结构:
├── build
├── config
├── src
│ ├── api
│ ├── assets
│ ├── components
│ ├── pages
│ ├── router
│ ├── utils
│ ├── vuex
│ ├── App.vue
│ ├── main.js
│ ├── admin.js
│ └── Admin.vue
├── static
│ └── images
├── README.md
├── admin.html
├── index.html
├── package.json
└── yarn.lock
我相信这样的结构大家一定很熟悉,除了 admin.html
和src文件夹下面的 Admin.vue 、 admin.js ,还有一些api,pages,vuex等文件夹,就是最常见的一个vue-cli初始化的项目结构。
我想要就是新增一个后台管理界面的入口admin.html,其他能够共用的还是共用,进入正题:
修改webpack的配置文件
修改 webpack.base.conf.js
打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口:
entry: { app: './src/main.js', admin: './src/admin.js' //新增 },
这样运行编译的时候,每一个入口都会对应一个chunk。
run dev配置的修改
打开 ·~\build\webpack.dev.conf.js· ,在plugins下找到 HtmlWebpackPlugin ,在其后面添加对应的多页,并为每个页面添加Chunk配置如下:
new HtmlWebpackPlugin({ filename: 'index.html', //生成的html template: 'index.html', //来源html inject: true, chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源 }), new HtmlWebpackPlugin({ filename: 'admin.html', template: 'admin.html', inject: true, chunks: ['admin'] }),
run build配置的修改
修改config/index.js
打开 ~\config\index.js ,找到build下的 index: path.resolve(__dirname, '../dist/index.html') ,在其后添加多页:
admin: path.resolve(__dirname, '../dist/admin.html'),
修改 webpack.prod.conf.js
打开 ~\build\webpack.prod.conf.js ,在plugins下找到 HtmlWebpackPlugin ,在其后面添加对应的多页,并为每个页面添加Chunk配置:
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'app'] }), new HtmlWebpackPlugin({ filename: config.build.admin, template: 'admin.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'admin'] }),
看完上述内容,你们对怎么在WebPack中配置vue多页面有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。