vue-cli-plugin-wieldy-webpack
v1.0.9
Published
将 wieldy-webpack 迁移到 vue-cli 3.0 插件体系
Downloads
26
Readme
vue-cli-plugin-wieldy-webpack
将 wieldy-webpack 迁移到 vue-cli 3.0 插件体系
使用方法
在 vue-cli3 创建的项目目录下执行
vue add wieldy-webpack
内置功能
- 预备多套环境配置
- 开发:
development
- 测试:
test
- 预上线:
stage
- 生产:
production
- 开发:
- 默认的
browserslist
配置 - 在
vue.config.js
从环境变量中获取publicPath
- 增强
webpack
配置- 根据文件的名称给动态分离的
chunk
命名 - 将
webpack runtime
inline 到 html 文件中 - 增加 layout 机制
- 添加 banner 注释
- 优化图片
- 开启 mock server 功能
- 调整 minimizer option
- 根据文件的名称给动态分离的
预留的环境变量
__public_base_path__
publicPath
的基础路径, 会拼上pkg.name
形成完整的publicPath
需要在
vue.config.js
中配合lib/get-public-path.js
来使用__public_path__
直接设置
publicPath
需要在
vue.config.js
中配合lib/get-public-path.js
来使用如果是使用
hash
模式的单页应用, 可以设置__public_path__
的值为./
这个相对路径, 最终publicPath
的值会变成''
, 即relative to HTML page, 这样不管如何部署, 都可以正常加载到静态资源例如:
- 根路径部署: https://project-a.domain.com/index.html
- 非根目录部署: https://domain.com/path/to/project-a/index.html
生成的资源路径如下:
- CSS:
<link href="css/main.e2efc4e5.css" rel="stylesheet">
- CSS 中的资源:
background: url(../img/logo.82b9c7a5.png);
- CSS 中的资源:
- JS:
<script src="js/main.4f43c938.js"></script>
- 其他资源的加载情况:
<img src="img/logo.82b9c7a5.png">
__use_default_css_public_path__
true
orfalse
让 CSS 中引用的资源路径直接使用
publicPath
, 而不是使用相对路径(@vue/cli-service/lib/config/css.js 的机制). 如果设置为true
, 就必须将vue.config.js
的publicPath
设置为根路径开始的绝对路径
配置 layout 机制
如果想不指定 template
参数, 需要将 public/index.html
的内容清空或者只保留 <body>
中的内容
给默认的单页配置 layout
// vue.config.js pages: { main: { entry: 'src/main.js', filename: 'index.html', title: 'page title', _useLayout: { layoutFile: './src/layout.html' // 这里仅为示例, layout 文件需要自己去指定 } } }
多页配置 layout
// vue.config.js var createPageConfig = require('vue-cli-plugin-wieldy-webpack/lib/create-page-config.js'); pages: { ...createPageConfig('src/pages/a/a.js', { // page config title: 'page a' }, { // layout config layoutFile: './src/layout.html' // 这里仅为示例, layout 文件需要自己去指定 }), ...createPageConfig('src/pages/b/b.js', { title: 'page b' }, { layoutFile: './src/layout.html' // 这里仅为示例, layout 文件需要自己去指定 }) }