vue typescript multi pages

vue-typescript-multi-páginas

configuração de aplicativo de várias páginas typescript + vue e otimização de construção

Estrutura de diretório do projeto:

├── public                     // 静态打包文件
├── scripts                    // 自动创建脚本
├── src                        // 源代码
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── config                 // 配置相关
│   ├── utils                  // 全局公用方法
│   ├── icons                  // 全局svg组件
│   │── pages                  // 业务模块根目录modules
│   │	  ├── demo               // 页面
│           ├── app.vue        // 入口页面
│           └── main.ts        // 入口初始化
│   │		└── index              // 页面
├── .gitignore                 // git 忽略项
├── package.json               // 安装依赖包
├── vue.config.js              // 项目配置
├── README.md                // 文档说明

Pontos de função:

• Configuração de cada ambiente
• Crie scripts automáticos de novas páginas e componentes
• Otimização de construção de pacote (dllPlugin)

Configuração e otimização de build

1. Configuração de cada ambiente

Crie um novo .env.name no diretório raiz, por exemplo: arquivo .env.test

# just a flag
NODE_ENV = "test"

VUE_APP_TITLE = 'test'

# base url
BASE_URL = "http://xxx.com"

Configure diferentes endereços de interface e NODE_ENV de acordo com diferentes ambientes para facilitar o processamento subsequente de acordo com a configuração do ambiente de empacotamento.

2. Otimização de construção

1.webpack dllplugin extrai bibliotecas públicas e melhora a velocidade de empacotamento

1.1 Instale webpack e webpack-cli globalmente

webpack -v

1.2 Gere dll e adicione-a no arquivo package.json

 "scripts" : {
  ...
  "dll" : "webpack -p --progress --config ./webpack.dll.conf.js"
}

Executar dll gerada

 yarn run dll

1.3 Crie um novo arquivo webpack.dll.confl.js no diretório raiz e instale o plug-in CleanWebpackPlugin

 const path = require ( 'path' )
const webpack = require ( 'webpack' )
const { CleanWebpackPlugin } = require ( 'clean-webpack-plugin' )

// dll文件存放的目录
const dllPath = 'public/vendor'

module . exports = {
  entry : {
    // 需要提取的库文件
    vendor : [
      'vue' ,
      'vue-router' ,
      'vuex' ,
      'axios' ,
      'element-ui'
    ]
  } ,
  output : {
    path : path . join ( __dirname , dllPath ) ,
    filename : '[name].dll.js' ,
    // vendor.dll.js中暴露出的全局变量名，保持与 webpack.DllPlugin 中名称一致
    library : '[name]_[hash]'
  } ,
  plugins : [
    // 清除之前的dll文件
    new CleanWebpackPlugin ( ) ,
    // 设置环境变量
    new webpack . DefinePlugin ( {
      'process.env' : {
        NODE_ENV : 'production'
      }
    } ) ,
    new webpack . DllPlugin ( {
      path : path . join ( __dirname , dllPath , '[name]-manifest.json' ) ,
      // 保持与 output.library 中名称一致
      name : '[name]_[hash]' ,
      context : process . cwd ( )
    } )
  ]
}

1.4 Ignorar arquivos compilados

Para reduzir o tempo de compilação do webpack para bibliotecas públicas, adicione vue.config.js

 const webpack = require ( 'webpack' )

module . exports = {
  ...
  configureWebpack : {
    plugins : [
      new webpack . DllReferencePlugin ( {
        context : process . cwd ( ) ,
        manifest : require ( './public/vendor/vendor-manifest.json' )
      } )
    ]
  }
}

1.5 Introduzir automaticamente o arquivo DLL gerado

Instale add-asset-html-webpack-plugin e introduza automaticamente os arquivos gerados

 module . exports = {
  ...
  configureWebpack : {
    plugins : [
      ...
      // 将 dll 注入到 生成的 html 模板中
      new AddAssetHtmlPlugin ( {
        filepath : path . resolve ( __dirname , './public/vendor/*.js' ) ,
        // dll 引用路径
        publicPath : './vendor' ,
        // dll最终输出的目录
        outputPath : './vendor'
      } )
    ]
  }
}

Há também GZip压缩e speed-measure-webpack-plugin Consulte vue.config.js para obter detalhes.