Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nuxt 如何自定义 html #109

Open
dailynodejs opened this issue Dec 15, 2021 · 4 comments
Open

Nuxt 如何自定义 html #109

dailynodejs opened this issue Dec 15, 2021 · 4 comments

Comments

@dailynodejs
Copy link
Collaborator

dailynodejs commented Dec 15, 2021 •
edited
Loading

如何自定义 html

配置

nuxt.config.js 里面配置

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

根目录 app.html

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

image

默认

image

<!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
Copy link
Collaborator Author

dailynodejs commented Dec 15, 2021 •
edited
Loading

webpack 如何处理

html-webpack-plugin

import HTMLPlugin from 'html-webpack-plugin'

image

image

@dailynodejs
Copy link
Collaborator Author

image

@dailynodejs
Copy link
Collaborator Author

parseTemplate

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

import {
  template
} from 'lodash'

image

@ddd-000
Copy link

ddd-000 commented Dec 17, 2021

如果只想获得头部链接或meta，直接通过{ { HEAD.link } }或者{ { HEAD.meta } }是无法拿到的。
HEAD元不是对象，而是字符串。
image
在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'
      }
    ],
  },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dailynodejs @ddd-000