1.0.9 • Published 6 years ago
vue-cli-plugin-wieldy-webpack v1.0.9
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 runtimeinline 到 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__trueorfalse让 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 文件需要自己去指定 }) }