vue typescript multi pages 다운로드 - vue typescript multi pages 소스 코드 다운로드

vue typescript multi pages

기타 카테고리

1.0.0

다운로드

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'
      } )
    ]
  }
}