vue typescript multi pages

vue-typescript-หลายหน้า

การกำหนดค่าแอปพลิเคชันหลายหน้า typescript + vue และการเพิ่มประสิทธิภาพการสร้าง

โครงสร้างไดเรกทอรีโครงการ:

├── 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                // 文档说明

จุดฟังก์ชัน:

• การกำหนดค่าของแต่ละสภาพแวดล้อม
• สคริปต์หน้าและส่วนประกอบใหม่โดยอัตโนมัติ
• การเพิ่มประสิทธิภาพการสร้างแพ็คเกจ (dllPlugin)

สร้างการกำหนดค่าและการเพิ่มประสิทธิภาพ

1. การกำหนดค่าของแต่ละสภาพแวดล้อม

สร้าง .env.name ใหม่ในไดเร็กทอรีราก เช่น ไฟล์ .env.test

# just a flag
NODE_ENV = "test"

VUE_APP_TITLE = 'test'

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

กำหนดค่าที่อยู่อินเทอร์เฟซที่แตกต่างกันและ NODE_ENV ตามสภาพแวดล้อมที่แตกต่างกัน เพื่ออำนวยความสะดวกในการประมวลผลในภายหลังตามการกำหนดค่าสภาพแวดล้อมบรรจุภัณฑ์

2. การเพิ่มประสิทธิภาพการสร้าง

1.webpack dllplugin แยกไลบรารีสาธารณะและปรับปรุงความเร็วการบรรจุ

1.1 ติดตั้ง webpack และ webpack-cli ทั่วโลก

webpack -v

1.2 สร้าง dll และเพิ่มลงในไฟล์ package.json

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

ดำเนินการ dll ที่สร้างขึ้น

 yarn run dll

1.3 สร้างไฟล์ webpack.dll.confl.js ใหม่ในไดเร็กทอรีรากและติดตั้งปลั๊กอิน 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 ละเว้นไฟล์ที่คอมไพล์แล้ว

เพื่อลดเวลาในการคอมไพล์ของ webpack สำหรับไลบรารีสาธารณะ ให้เพิ่มใน 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 แนะนำไฟล์ dll ที่สร้างขึ้นโดยอัตโนมัติ

ติดตั้ง add-asset-html-webpack-plugin และแนะนำไฟล์ที่สร้างขึ้นโดยอัตโนมัติ

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

นอกจากนี้ยังมี GZip压缩และ speed-measure-webpack-plugin โปรดดูรายละเอียด vue.config.js