vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求，可以创建/使用自定义模板。
一是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'myIndex.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
]
自定义的myIndex.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
参考：http://www.cnblogs.com/haogj/p/5160821.html
另一个是配置html-webpack-plugin
cnpm install html-webpack-plugin --save-dev
2.在webpack配置文件头部require html-webpack-plugin模块，并保存引用至htmlWebpackPlugin[变量]。
const HtmlWebpackPlugin = require('html-webpack-plugin')
3.为webpack配置文件暴露的对象添加一个plugins属性，属性值为一个数组，将新建的html-webpack-plugin对象实例添加到数组中。若不传入任何参数，那么插件将生成默认的html文件。
module.exports = {
entry: {
main:'./src/script/main.js'
},
output: {
path: './dist',
filename: 'js/[name].bundle.js'
},
plugins:[
new htmlWebpackPlugin()
]
}
4.配置参数。为新建的对象实例传入一个对象字面量参数，初始化对象实例的属性
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: resolve('favicon.ico'),
title: 'vue-element-admin',
path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}),
]
5.在HTML中使用
<body>
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
参考：
https://www.jianshu.com/p/89414e89c563
vue中自定义html文件的模板的更多相关文章
- vue中自定义组件（插件）
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- 读取web工程中.properties资源文件的模板代码
读取web工程中.properties资源文件的模板代码 // 读取web工程中.properties资源文件的模板代码 private void test2() throws IOException ...
- vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
- vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...
- CI框架中自定义view文件夹位置
要想自定义view文件夹的位置,首先要了解CI框架时如何加载view文件夹的. CI中默认调用view的方法是: $this->load->view(); //这一行代码的原理是什么呢?请 ...
- vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue中引入字体文件
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...
随机推荐
- oracle中创建用户、角色、权限简单使用
Oracle关于用户.权限.角色简单使用 创建数据库用户(在system用户下)create user 用户名 identified by 密码; 授权grant 权限名 to 用户名; 查看当前用户 ...
- 针对工程实践项目的用例建模Use Case Modeling
一.什么是用例建模(Use Case Modeling) 1.用例(Use Case) (1)概念:用例是软件工程或系统工程中对系统如何反应外界请求的描述,是一种通过用户的使用场景来获取需求的技术. ...
- 无法打开msvcrtd.lib
- Shiro框架 - 【shiro基础知识】
转载:https://segmentfault.com/a/1190000013875092#articleHeader27 读完需要 63 分钟 前言 本文主要讲解的知识点有以下: 权限管理 ...
- js如何展示上传的图片
前言:本文章主要讲的是上传的图片如何展示在页面上. 一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示.但是,我今天讲的是不通过前面说的过程,而是直接使用js将 ...
- 好看的原生UI
我前端可以说是0基础,作显示页面的时候自己设置各种CSS一是麻烦,二是难看,所以找UI组件, 比较流行的组件如ELEMENT之类都需要安装或者依赖其他框架如VUE,为了省事,决定使用原生UI组件, 本 ...
- 详解PHP中的三大经典模式
单例模式 单例模式的含义: 作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例.它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用. 单例模式 ...
- 微信小程序的canvas和遮盖布颜色设置问题
canvas绘画出并显示小程序的逻辑首先是将网络图片转化为本地图片,其次再将进行绘画.将本地图片和二维码显示在画布上,最后将整个画布截图用api显示在屏幕上.真正的画图让他飞去屏幕外. 有时候会需要用 ...
- 【XSY2488】【HDU5818】Joint Stacks
这题合并栈让我们想到了左偏树. 我们可以维护val值为时间,dis值为size的左偏树,定义两个根root1和root2,表示两个栈的栈顶,建大根的左偏树. 接下来的插入,删除,两个栈合并都是左偏树的 ...
- NOIP模拟测试2-5
该补一下以前挖的坑了 先总结一下 第二次 T1 搜索+剪枝 #include<cstdio> #include<iostream> #define ll long long u ...