search

diveDylan / blog

My blog, detail is in the issues list
2 stars 0 forks source link

Vue-cli 3初体验（一） #3

Open diveDylan opened 5 years ago

diveDylan commented 5 years ago

HTML: index file is a template

public/index.html 经 html-webpack-plugin处理成为了一个模板像esj、jade一样的存在， 支持的语法如下：

  • <%= VALUE %> for unescaped interpolation; 常规变量
  • <%- VALUE %> for HTML-escaped interpolation; html文本、节点
  • <% expression %> for JavaScript control flows. js表达式

    • 变量主要来源：html-webpack-plugin暴露的变量，客户端的环境变量

    <!-- exmaple for env from vue-cli website -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

    关于使用html-webpack-plugin插件的用法，我们这边举一个跟CDN相关的列子：

    
<!--vue.config.js-->
// external: a way of excluding dependencies from the output bundles [https://webpack.js.org/configuration/externals/#root]
// mostly if u want use cdn, here is examples
externals: {
'element-ui': 'ELEMENT'
}
// const u cdn list
const cdn = {
css: [
// element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
],
js: [
// element-ui js
'https://unpkg.com/element-ui/lib/index.js'
]
}
// config html-webpack-plugin
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
    `index.html`template写入以下代码，`elemetn cdn` 一定要在引入的`vue`后面，有相互依赖关系
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <% } %>

    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>

    <% } %>