Vue多页项目使用swig模板引擎 #47
Description
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% block title %}
<title>标题</title>
{% endblock %}
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.tb.com.cn">
<meta name="renderer" content="webkit">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
{% block meta %}
<meta name="keywords" content="keywords">
<meta name="description" content="description">
{% endblock %}
{% block style %}{% endblock %}
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- CDN公共文件 -->
<!-- <script type="text/javascript" src="{{ config.env.CDN_DOMAIN }}/app_js/??libs/echarts/4.2.1/echarts.min.js,libs/zepto/1.2.0/zepto.min.js,libs/bscroll/1.12.4/bscroll.min.js"></script> -->
<!-- 使用lib文件 -->
{% if config.env.APP_ENV === 'development' %}
<!-- <script type="text/javascript" src="{{ config.env.PUBLIC_PATH }}/assets/libs/vue.js?t={{ config.env.TIME_STAMP }}"></script> -->
{% else %}
<!-- <script type="text/javascript" src="{{ config.env.PUBLIC_PATH }}/assets/libs/vue.min.js?t={{ config.env.TIME_STAMP }}"></script> -->
{% endif%}
</body>
</html>index.html
{% extends '../../template/layout.html' %}
{% block title %}
<title>产品详情</title>
{% endblock %}
{% block meta %}
<meta name="keywords" content="产品详情">
<meta name="description" content="产品详情">
{% endblock %}vue.config.js
const swigLoader = require('swig-loader')
// html相关变量配置注入
swigLoader.resourceQueryCustomizer(function (resourceQuery, templatepath) {
resourceQuery.config = {
env: utils.env
}
return resourceQuery
})
// html插件
console.log('\n\n')
for (const name in pages) {
config.plugins.delete(`preload-${name}`)
config.plugins.delete(`prefetch-${name}`)
config.plugin(`html-${name}`).tap(options => {
options[0].minify = false
console.log(options)
return options
})
}
console.log('\n\n')utils.js
const PUBLIC_PATH = process.env.VUE_APP_BASE_PATH
const CDN_DOMAIN = process.env.VUE_APP_CDN
const APP_ENV = process.env.VUE_APP_ENV
const TIME_STAMP = Date.now()
exports.env = {
APP_ENV,
BASE_API,
PUBLIC_PATH,
CDN_DOMAIN,
TIME_STAMP
}
// 生成pages
exports.htmlPlugin = function () {
let pages = {}
glob.sync('./src/pages/*/main.js').forEach(filepath => {
let filelist = filepath.split('/')
let fileName = filelist[filelist.length - 2]
pages[fileName] = {
entry: `src/pages/${fileName}/main.js`,
template: filepath.split('/main.js')[0] + '/index.html',
filename: `${fileName}.html`,
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
})
return pages
}.env.development
NODE_ENV=development
VUE_APP_ENV=development
VUE_APP_CDN=https://cdn.tb.com.cn
VUE_APP_BASE_API=
VUE_APP_BASE_PATH=