dailynodejs commented 2 years ago

如何自定义 html

配置

nuxt.config.js 里面配置

appTemplatePath: './test/mytemplate.html',

根目录 app.html

https://nuxtjs.org/docs/concepts/views/#document-apphtml

默认

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

内部读取这几个 html 模板

// If app.html is defined, set the template path to the user template
  if (options.appTemplatePath === undefined) {
    options.appTemplatePath = path.resolve(options.buildDir, 'views/app.template.html')
    if (fs.existsSync(path.join(options.srcDir, 'app.html'))) {
      options.appTemplatePath = path.join(options.srcDir, 'app.html')
    }
  } else {
    options.appTemplatePath = path.resolve(options.srcDir, options.appTemplatePath)
  }

dailynodejs commented 2 years ago

webpack 如何处理

html-webpack-plugin

import HTMLPlugin from 'html-webpack-plugin'

dailynodejs commented 2 years ago

parseTemplate

在 vue-renderer/src/renderer.js 里面

import {
  template
} from 'lodash'

ddd-000 commented 2 years ago

如果只想获得头部链接或meta，直接通过{ { HEAD.link } }或者{ { HEAD.meta } }是无法拿到的。 HEAD元不是对象，而是字符串。在nuxt.config.js中修改

head: {
    title: '新片场素材',
    meta: [
      { title: '新片场素材' },
      { charset: 'utf-8' },
      { hid: 'keywords', name: 'keywords', content: '新片场素材,素材标签,Pond5,广告音乐,音乐素材,视频素材,实拍视频,片头素材,空镜素材,罐头音乐,背景音乐,BGM下载,正版图片,正版图库,正版素材,商用图片,商业图片,商用图库,矢量素材,AE模板,免费素材' },
      { hid: 'description', name: 'description', content: '新片场素材丨素材标签丨汇集百万创作人原创素材丨√品类丰富 √极致性价比 √贴心售后 √原创保障 点击下载→'},
      { name: 'viewport', content: 'width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css' },
      { rel: 'icon', type: 'image/x-icon', href: 'https://www.xinpianchang.com/favicon/favicon.ico' },
      { rel: 'dns-prefetch', href: '//isp.xpccdn.com' },
      { rel: 'dns-prefetch', href: '//static6.xpccdn.com' },
      { rel: 'dns-prefetch', href: '//ks-stock4.xpccdn.com' },
      { rel: 'dns-prefetch', href: '//hm.baidu.com' },
    ],
    script: [
      {
        src: 'https://lib.baomitu.com/vConsole/3.0.0/vconsole.min.js'
      }
    ],
  },

xinpianchang / fe-weekly

Nuxt 如何自定义 html #109

如何自定义 html

配置

根目录 app.html

默认

webpack 如何处理

html-webpack-plugin

parseTemplate