vue typescript multi pages

vue-typescript-multi-pages

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