vuetify离线文档部署

简述

因为vuetify官方文档访问太慢了，而且经常访问不了，所以在本地部署了套环境。

环境要求

os: ubuntu 18
nginx: 1.14
node: 12.13(最好node12以上)
yarn: 1.22
vuetify: 2.3.8

1 安装yarn

# 需要用yarn npm会有些问题
npm install yarn -g 
yarn config set registry https://registry.npm.taobao.org/

1 下载vuetify代码

git clone https://github.com/vuetifyjs/vuetify.git

2 编译api-generator

cd vuetify/packages/api-generator
yarn install
yarn build

3 编译doc

需要先把package.json的@vuetify/api-generator包注释掉因为@vuetify/api-generator发布到npm上的版本是2.1.7

cd vuetify/packages/doc
yarn install 
yarm  add  webpack-dev-server cross-env  webpack webpack-merge webpack-cli lodash vue-template-compiler vue-loader
cp -rf ../api-generator/ ./node_modules/@vuetify/api-generator
rm -rf ./node_modules/@vuetify/api-generator/node_modules

修改src/index.template.html

<body>
    <!--vue-ssr-outlet-->
    {{{ scripts }}}
  </body>
修改为
<body>
  <noscript>
    <strong>We're sorry but h5-front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  </body>

修改后的

<!DOCTYPE html>
<html lang="{{ lang || 'en' }}">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui">
    <meta name="description" content="{{ description }}">
    <meta name="twitter:card" content="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-300.png">
    <meta property="og:url" content="https://{{ hostname }}{{ url }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ title }}">
    <meta property="og:description" content="{{ description }}">
    <meta property="og:image" content="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-300.png">
    <meta property="fb:app_id" content="542948969434243">
    <meta name="keywords" content="{{ keywords }}">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="search" type="application/opensearchdescription+xml" title="Vuetify" href="/search.xml" />
    {{{ hreflangs }}}
  </head>
  <body>
    <noscript>
      <strong>We're sorry but h5-front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

修改webpack配置 build目录的webpack.client.config.js 和webpack.server.config.js

3.1 merge方法改为merge.merge

image.png

3.2 plugins新增新的插件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: resolve('../src/index.template.html'),
    }),

image.png

3.3 编译

# 编译后把生成的dist目录复制到nginx的目录下
yarn build

3.4 nginx配置

server {
        listen  8080;
        server_name vuetify.potens.top;
        location / {
                root    /site/vuetify;
                index   index.html;
                try_files $uri $uri/ /index.html;
        }
}

4 可访问我部署好的

地址: http://vuetify.potens.top/zh-Hans/
编译之后文件下载地址: http://pic.potens.top/upload/vuetify.tar

最后编辑于：2021.01.23 18:50:19