这篇文章是我看视频后总结的,尽可能的细致的记录了下来。
如果有哪里说的不对或者不全的,大家告诉我,我会及时修改。
目录
demo演示说明
http://localhost:8088/user.index.html#/
下有路由http://localhost:8088/user.index.html#/u
,可以在这个路由上点击跳到http://localhost:8088/goods.index.html#/
;
http://localhost:8088/goods.index.html#/
下有路由http://localhost:8088/goods.index.html#/g,可以在这个路由上点击跳到``````http://localhost:8088/user.index.html#/
;
跳转通过a标签的url实现。
VUE多页应用配置
- 核心思想: 两个vue单页项目,同时放在src目录下,一次webpack打包,跳转用url
- 所需插件 webpack-webpack-plugin
- webpack操作:
-
- 多个入口 { main1:’./usermain.js’,main2:’./goodsmain.js’ }
- 用多次html插件
-
- webpack操作:
原理:
目录结构
只做参考,具体以项目目录为准
webpack.base.conf.js 配置入口
// module.exports中:
// 相对于项目根目录的,可以通过node的方式遍历,这里现在先写死
entry: {
user: './src/user/main.js', // 对应user项目
goods: './src/goods/main.js' // 对应goods项目
},
- 给dist分目录的话,通过 output
生产环境的配置
webpack.prod.conf.js
每用一次html-webpack-plugin就是对一个vue单页项目做打包,可以遍历( 加到plugins里面去 ),这里先写死。
// 对user项目
new HtmlWebpackPlugin({
filename: 'user.index.html',
template: path.join(__dirname, '../src/user/index.html'),
/* chunks 描述里面具体的块
** manifest 关联清单,抽第三方包
** vendor 第三方库
** filename 自己, 起个名字。入口实际就是entry的key
*/
chunks: ['manifest', 'vendor', 'user'],
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
// 对goods项目
new HtmlWebpackPlugin({
filename: 'goods.index.html',
template: path.join(__dirname, '../src/goods/index.html'),
chunks: ['manifest', 'vendor', 'goods'],
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
-
注意事项
// 文件名称 filename: filename + '.html', // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本 chunks: ['manifest', 'vendor' , filename], inject: true
-
生成的dist目录结构
-
getHtmls的思路
- 更为灵活的读取各项目下的js文件(入口) entry:{‘js文件名’:‘js文件路径’ }
- 更为灵活的读取各项目下的html文件(首页.html)
plugins:[].concat( [ new HtmlWebpackPlugin(),new HtmlWebpackPlugin() ] )
- filename属性是生成的相对dist的文件名 xxx.html
- template 模板生成的参照物 需要绝对路径||相对路径 ‘./xxx.html’
- chunks:[filename] 指定第三引入的js文件名称
-
- 这个[name]其实就是entry的key
开发环境的配置
- 同开发环境配置。
生产环境和开发环境配置的合并(可以直接看这里~~)
-
思路:把插件配置提出来,放到webpack.base的plugins 里面
-
在build中新建自己的插件配置 -> myHtmlWabpackPlus.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = [ // user项目 new HtmlWebpackPlugin({ filename: 'user.index.html', template: path.join(__dirname, '../src/user/index.html'), /* chunks 描述里面具体的块 ** manifest 关联清单,抽第三方包 ** vendor 第三方库 ** filename 自己, 起个名字 */ chunks: ['manifest', 'vendor', 'user'], 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' }), // goods项目 new HtmlWebpackPlugin({ filename: 'goods.index.html', template: path.join(__dirname, '../src/goods/index.html'), chunks: ['manifest', 'vendor', 'goods'], inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) ]
-
webpack.base.js
中引入myHtmlWabpackPlus.js
首先引入
const myHtmlWabpackPlus = require('./myHtmlWebpackPlus')
在module.exports 中加入
// 根属性 plugins:[] plugins: myHtmlWabpackPlus
- ***注意:***一定要先删掉
webpack.prod.conf.js
和webpack.dev.conf.js
中的new HtmlWebpackPlugin
部分
- ***注意:***一定要先删掉
-
部署:
-
解决 多页默认显示哪个页面为首页:
-
开发环境: 有两种方式
-
package.json scripts
的dev配置--open-page xxx.html
如:"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open-page user.index.html"
- 注意顺序
-
打开的时候需要在端口号后加上某个页面的路径,如:
http://localhost:8081/user.index.html#/
,否则显示Cannot GET
。路径名称是dist目录生成的文件的名字。
-
-
生产环境配置 server(服务器)节点
以nginx为例: 打开
nginx.conf
server { listen 9527; server_name localhost; location / { root html; index user.index.html user.index.htm; } }
-
参考: 开课吧涂老师视频