html-webpack-plugin修改页面的title的方法

vue-cli2.X：修改config目录下index.js

const title = '标题1'
// const title = '标题2'
// const title = '标题3'
module.exports = {
    title: title,
    dev: { ... },
    build: { ... },
    test: { ... }
接着就可以在webpack.dev.conf.js, webpack.prod.conf.js中的HtmlWebpackPlugin使用config.title

new HtmlWebpackPlugin({
    title: config.title,
    ...
 }),
最后在index.html使用

<title><%= htmlWebpackPlugin.options.title %></title>
如果项目需要根据title有不同的布局可以在main.js引入config并设置为全局变量

const config = require('../config/index')
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    data () {
      return {
        title: config.title
      }
    }
})
vue文件中通过$root.title使用即可，这样打包的时候只要切换config目录下的index一处地方就好了，不必多处修改降低出错概率。

vue-cli3.X：很简单，只要vue.config.js中配置

configureWebpack: config => {
    return {
        title: title,
        resolve: {
          alias: {
            '@': resolve('src')
          }
        },
        plugins: []
      }
    }
}
public目录下的index.html使用

<title><%= webpackConfig.title %></title>

赞 (0)

相关推荐

  • html-webpack-plugin修改页面的title的方法

    vue-cli2.X:修改config目录下index.js const title = '标题1' // const title = '标题2' // const title = '标题3' module.exports = {     title: title,     dev: { ... },     build: { ... },     test: { ... } 接着就可以在webpack.dev.conf.js, webpack.prod.conf.js中的HtmlWebpack

  • 使用vue-router设置每个页面的title方法

    基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口

  • vue利用vue meta info设置每个页面的title与meta信息

    title: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 #文章页面上的显示名称,一般是中文 date: 2019-11-20 16:30:16 #文章生成时间,一般不改,当然也可以任意修改 categories: vue #分类 tags: [vue] #文章标签,可空,多标签请用格式,注意:后面有个空格 description: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 如需使用 vue-meta-

  • python抽取指定url页面的title方法

    今天简单使用了一下python的re模块和lxml模块,分别利用的它们提供的正则表达式和xpath来解析页面源码从中提取所需的title,xpath在完成这样的小任务上效率非常好,在这里之所以又使用了一下正则表达式是因为xpath在处理一些特殊的页面的时候会出现乱码的情况,当然这不是xpath的原因,而是页面本身编码,跟utf-8转码之间有冲突所致,这里看代码: # !/usr/bin/python #-*-coding:utf-8-*- ''' 功能:抽取指定url的页面内容中的title '

  • 原生JS 购物车及购物页面的cookie使用方法

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物页面</title> <style> ul{list-style:none;padding:0;margin:0;} .goods li{display:inline-block;border:1px solid #ddd;pa

  • ASP.NET Core中Razor页面的Handlers处理方法详解

    ASP.NET Core中Razor页面的Handlers处理方法详解

    简介 在前一篇文章中,我们讨论了Razor页面.今天我们来谈谈处理方法(Handlers). 我们知道可以将代码和模型放在 .cshtml 文件里面或与 .cshtml 匹配的 .cshtml.cs 文件中. Razor页面处理程序或处理方法将用户请求匹配到我们的方法:请求来自 **.cshtml **文件. Razor页面遵循特定的命名约定.从上一篇文章可以看出,.NET Core开发工具自动生成了很多处理方法,例如下面这些: OnGet OnPost OnGetAsync OnPostAsy

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • PHP输出XML到页面的3种方法详解

    第一种方法: 复制代码 代码如下: <?phpheader("Content-type: text/xml");echo "<?xml version=/"1.0/" encoding=/"UTF-8/"?>";echo "<users>";echo "<user>";   echo "<name>";    ec

  • 基于Vue的SPA动态修改页面title的方法(推荐)

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点:App.Vue默认的e

  • vue如何动态修改meta的title

    vue如何动态修改meta的title

    目录 如何动态修改meta的title 动态修改路由的meta.title 需求 解决办法 如何动态修改meta的title 需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页query携带参数name到详情页实现动态title) @on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})" 列表页点击携带name到详情页职位详情页的title,并且赋值给route

随机推荐