基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架

vue3-h5-template

基于 Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 适配方案+axios 封装 + jssdk 配置 + vconsole 移动端调试，构建手机端模板脚手架

项目地址：github

查看 demo 建议手机端查看

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

本示例 Node.js 12.14.0

项目结构

vue-h5-template -- UI 主目录  
├── public -- 静态资源  
├ ├── favicon.ico -- 图标  
├ └── index.html -- 首页  
├── src -- 源码目录  
├ ├── api -- 后端交互的接口  
├ ├── assets -- 静态资源目录
├ ├ ├── css
├ ├ ├── index.scss -- 全局通用样式
├ ├ ├── mixin.scss -- 全局 mixin
├ ├ └── variables.scss -- 全局变量  
├ ├── components -- 封装的组件  
├ ├── config -- 环境配置  
├ ├── hooks -- vue3 Hooks
├ ├── model -- 类型声明文件
├ ├── const -- 放 vue 页面的配置常量  
├ ├── plugins -- 插件  
├ ├── route -- VUE 路由  
├ ├ ├── index -- 路由入口  
├ ├ └── router.config.js -- 路由表  
├ ├── store -- VUEX  
├ ├── utils -- 工具包  
├ ├ ├── request.js -- axios 封装
├ ├ └── storage.js -- 本地存储封装
├ ├── views -- 业务上的 vue 页面  
├ ├ ├── layouts -- 路由布局页面(是否缓存页面)
├ ├ ├── tabBar -- 底部菜单页面
├ ├ └── orther -- 其他页面
├ ├── App.vue -- 根组件  
├ ├── main.ts -- 入口 ts  
├ ├── shims-axios.d.ts -- axios 声明文件  
├ └── shims-vue.d.ts -- vue 组件声明文件
├── .env.development -- 开发环境  
├── .env.production -- 生产环境  
├── .env.staging -- 测试环境  
├── .eslintrc.js -- ESLint 配置  
├── .gitignore -- git 忽略  
├── .postcssrc.js -- CSS 预处理配置(rem 适配)  
├── babel.config.js -- barbel 配置入口  
├── tsconfig.json -- vscode 路径引入配置
├── package.json -- 依赖管理  
└── vue.config.js -- vue cli4 的 webpack 配置

启动项目

git clone https://github.com/ynzy/vue3-h5-template.git

cd vue3-h5-template

npm install

npm run serve

目录

• √配置多环境变量
• √rem 适配方案
• √VantUI 组件按需加载
• √Sass 全局样式
• √适配苹果底部安全距离
• √使用 Mock 数据
• √Axios 封装及接口管理
• √Vuex 状态管理
• √Vue-router
• √Webpack 4 vue.config.js 基础配置
• √配置 alias 别名
• √配置 proxy 跨域
• √配置 打包分析
• √externals 引入 cdn 资源
• √去掉 console.log
• √splitChunks 单独打包第三方模块
• √gzip 压缩
• √uglifyjs 压缩
• √vconsole 移动端调试
• √动态设置 title
• √本地存储 storage 封装
• √配置 Jssdk
• √Eslint + Pettier 统一开发规范

✅ 配置多环境变量

package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

• 通过 npm run serve 启动本地 , 执行 development
• 通过 npm run stage 启动测试 , 执行 development
• 通过 npm run prod 启动开发 , 执行 development
• 通过 npm run stageBuild 打包测试 , 执行 staging
• 通过 npm run build 打包正式 , 执行 production

"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "cross-env NODE_ENV=dev vue-cli-service serve --mode staging",
  "prod": "cross-env NODE_ENV=dev vue-cli-service serve --mode production",
  "stageBuild": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}

配置介绍

  以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
  比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
  除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL
在项目根目录中新建.env.*

• .env.development 本地开发环境配置

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

• .env.staging 测试环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

• .env.production 正式环境配置

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV development staging production
变量我们统一在 src/config/env.*.ts 里进行管理。

这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？
修改起来方便，不需要重启项目，符合开发习惯。

config/index.js

export interface IConfig {
    env?: string // 开发环境
    title?: string // 项目title
    baseUrl?: string // 项目地址
    baseApi?: string // api请求地址
    APPID?: string // 公众号appId  一般放在服务器端
    APPSECRET?: string // 公众号appScript 一般放在服务器端
    $cdn: string // cdn公共资源路径
}

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

并且定义了接口类型，方便我们调用的时候可以自动识别参数

配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改

// 本地环境配置
module.exports = {
    title: 'vue-h5-template',
    baseUrl: 'http://localhost:9018', // 项目地址
    baseApi: 'https://test.xxx.com/api', // 本地api请求地址
    APPID: 'xxx',
    APPSECRET: 'xxx'
}

调用 config

import config from '@/config/index'
setup() {
  console.log('环境配置', config)
}

▲ 回顶部

✅ rem 适配方案

不用担心，项目已经配置好了 rem 适配, 下面仅做介绍：

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• amfe-flexible 用于设置 rem 基准值

yarn add postcss-pxtorem --dev
yarn add amfe-flexible --save

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

我采用了amfe-flexible进行设置 rem，看 Github 上说这个更好一些，使用哪个自行参考

// main.ts
// 移动端适配
import 'amfe-flexible'

更多详细信息： vant

新手必看，老鸟跳过

很多小伙伴会问我，适配的问题。

我们知道 1rem 等于html 根元素设定的 font-size 的 px 值。Vant UI 设置 rootValue: 37.5,你可以看到在 iPhone 6 下
看到 （1rem 等于 37.5px）：

切换不同的机型，根元素可能会有不同的font-size。当你写 css px 样式时，会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件，需要按照 rootValue: 37.5 来写样式。

举个例子：设计给了你一张 750px * 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。

• 当rootValue: 70 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑
  满。
• 当rootValue: 37.5 的时候，样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。

当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。

▲ 回顶部

✅ VantUI 组件按需加载

项目采用Vant 自动按需引入组件 (推荐)下
面安装插件介绍：

一般来说 ts 使用的是方案二，但是我在用的过程中有一些问题，所以采用了方案一

方案一：

babel-plugin-import 是一款 babel 插件，它会在编译过程中将
import 的写法自动转换为按需引入的方式

安装插件

npm i babel-plugin-import -D

在babel.config.js 设置

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
const plugins = [
    [
        'import',
        {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        },
        'vant'
    ]
]
module.exports = {
    presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
    plugins
}

方案二：
ts-import-plugin用于 TypeScript 的模块化导入插件

yarn add ts-import-plugin --dev 然后在 vue.config.js 中加入

const merge = require('webpack-merge')
const tsImportPluginFactory = require('ts-import-plugin')
// * 三方ui在ts下按需加载的实现
const mergeConfig = config => {
    config.module
        .rule('ts')
        .use('ts-loader')
        .tap(options => {
            options = merge(options, {
                transpileOnly: true,
                getCustomTransformers: () => ({
                    before: [
                        tsImportPluginFactory({
                            libraryName: 'vant',
                            libraryDirectory: 'es',
                            style: true
                        })
                    ]
                }),
                compilerOptions: {
                    module: 'es2015'
                }
            })
            return options
        })
}

使用组件

项目在 src/plugins/vant.js 下统一管理组件，用哪个引入哪个，无需在页面里重复引用

// 按需全局引入 vant组件
import { App as VM } from 'vue'
import { Button, Cell, CellGroup, Icon } from 'vant'

const plugins = [Button, Icon, Cell, CellGroup]

export const vantPlugins = {
    install: function(vm: VM) {
        plugins.forEach(item => {
            vm.component(item.name, item)
        })
    }
}

▲ 回顶部

✅ Sass 全局样式

使用dart-sass, 安装速度比较快，大概率不会出现安装不成功

每个页面自己对应的样式都写在自己的 .vue 文件之中 scoped 它顾名思义给 css 加了一个域的概念。

目录结构

vue-h5-template 所有全局样式都在 @/src/assets/css 目录下设置

├── assets
│   ├── css
│   │   ├── index.scss               # 全局通用样式
│   │   ├── reset.scss               # 清除浏览器默认样式
│   │   ├── mixin.scss               # 全局mixin
│   │   └── variables.scss           # 全局变量

vue.config.js 添加全局样式配置

css: {
    loaderOptions: {
        scss: {
            // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
            // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
            prependData: `
                @import "assets/css/mixin.scss";
                @import "assets/css/variables.scss";
                `
            // $cdn: "${defaultSettings.$cdn}";
        }
    }
},

设置 js 中可以访问 $cdn,.vue 文件中使用this.$cdn访问

// 引入全局样式
import '@/assets/css/index.scss'

// 设置 js中可以访问 $cdn
// 引入cdn
import { $cdn } from '@/config'
Vue.prototype.$cdn = $cdn

在 css 和 js 使用

▲ 回顶部

自定义 vant-ui 样式

现在我们来说说怎么重写 vant-ui 样式。由于 vant-ui 的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能
加 scoped，但你又想只覆盖这个页面的 vant 样式，你就可在它的父级加一个 class，用命名空间来解决问题。

.about-container {
    /* 你的命名空间 */
    .van-button {
        /* vant-ui 元素*/
        margin-right: 0px;
    }
}

父组件改变子组件样式 深度选择器

当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 ::v-deep 来实现：

▲ 回顶部

✅ 适配苹果底部安全距离

index.html 的 meta 指定了 viewport-fit=cover

vant 中自带底部安全距离参数

如果不用 vant 中的适配，也可以自己写，我在 scss 中写了通用样式

.fixIphonex {
    padding-bottom: $safe-bottom !important;
    &::after {
        content: '';
        position: fixed;
        bottom: 0 !important;
        left: 0;
        height: calc(#{$safe-bottom} + 1px);
        width: 100%;
        background: #ffffff;
    }
}

▲ 回顶部

✅ 使用 Mock 数据

mock 请求的封装采用的是 vue-element-admin 的 mock 请求封装，直接拿来用就可以了

• mock.js

const Mock = require('mockjs')

const user = require('./user')
// const role = require('./role')
// const article = require('./article')
// const search = require('./remote-search')

// const mocks = [...user, ...role, ...article, ...search]
const mocks = [...user]
// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
function mockXHR() {
    // mock patch
    // https://github.com/nuysoft/Mock/issues/300
    Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
    Mock.XHR.prototype.send = function() {
        if (this.custom.xhr) {
            this.custom.xhr.withCredentials = this.withCredentials || false

            if (this.responseType) {
                this.custom.xhr.responseType = this.responseType
            }
        }
        this.proxy_send(...arguments)
    }

    function XHR2ExpressReqWrap(respond) {
        return function(options) {
            let result = null
            if (respond instanceof Function) {
                const { body, type, url } = options
                // https://expressjs.com/en/4x/api.html#req
                result = respond({
                    method: type,
                    body: JSON.parse(body),
                    query: url
                })
            } else {
                result = respond
            }
            return Mock.mock(result)
        }
    }

    for (const i of mocks) {
        Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
    }
}

module.exports = {
    mocks,
    mockXHR
}

• user.js

const tokens = {
    admin: {
        token: 'admin-token'
    },
    editor: {
        token: 'editor-token'
    }
}

const users = {
    'admin-token': {
        roles: ['admin'],
        introduction: 'I am a super administrator',
        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        name: 'Super Admin'
    },
    'editor-token': {
        roles: ['editor'],
        introduction: 'I am an editor',
        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        name: 'Normal Editor'
    }
}

module.exports = [
    // user login
    {
        url: '/vue-h5/user/login',
        type: 'post',
        response: config => {
            const { username } = config.body
            const token = tokens[username]

            // mock error
            // if (!token) {
            //  return {
            //      code: 60204,
            //      message: 'Account and password are incorrect.'
            //  }
            // }

            return {
                code: 20000,
                data: token,
                msg: '登录成功'
            }
        }
    },

    // get user info
    {
        url: '/vue-h5/user/info.*',
        type: 'get',
        response: config => {
            const { token } = config.query
            const info = users['admin-token']
            // mock error
            // if (!info) {
            //  return {
            //      code: 50008,
            //      message: 'Login failed, unable to get user details.'
            //  }
            // }

            return {
                code: 20000,
                data: info,
                msg: '登录成功'
            }
        }
    },

    // user logout
    {
        url: '/vue-h5/user/logout',
        type: 'post',
        response: _ => {
            return {
                code: 20000,
                data: 'success'
            }
        }
    }
]

• main.js
  如果不需要使用，去除掉这段代码就可以了

// 使用mock数据
if (config.mock) {
    const { mockXHR } = require('../mock')
    mockXHR()
}

• 接口请求

onMounted(() => {
    axios
        .get('/vue-h5/user/info')
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.error(err)
        })
})

✅ Axios 封装及接口管理

utils/request.js 封装 axios ,开发者需要根据后台接口做修改。

• service.interceptors.request.use 里可以设置请求头，比如设置 token
• config.hideloading 是在 api 文件夹下的接口参数里设置，下文会讲
• service.interceptors.response.use 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录

/**
 * @description [ axios 请求封装]
 */
import store from '@/store'
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
// import { Message, Modal } from 'view-design' // UI组件库
import { Dialog, Toast } from 'vant'
import router from '@/router'
// 根据环境不同引入不同api地址
import config from '@/config'

const service = axios.create({
    baseURL: config.baseApi + '/vue-h5', // url = base url + request url
    timeout: 5000,
    withCredentials: false // send cookies when cross-domain requests
    // headers: {
    //  // clear cors
    //  'Cache-Control': 'no-cache',
    //  Pragma: 'no-cache'
    // }
})

// Request interceptors
service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        // 加载动画
        if (config.loading) {
            Toast.loading({
                message: '加载中...',
                forbidClick: true
            })
        }
        // 在此处添加请求头等，如添加 token
        // if (store.state.token) {
        // config.headers['Authorization'] = `Bearer ${store.state.token}`
        // }
        return config
    },
    (error: any) => {
        Promise.reject(error)
    }
)

// Response interceptors
service.interceptors.response.use(
    async (response: AxiosResponse) => {
        // await new Promise(resovle => setTimeout(resovle, 3000))
        Toast.clear()
        const res = response.data
        if (res.code !== 0) {
            // token 过期
            if (res.code === 401) {
                // 警告提示窗
                return
            }
            if (res.code == 403) {
                Dialog.alert({
                    title: '警告',
                    message: res.msg
                }).then(() => {})
                return
            }
            // 若后台返回错误值，此处返回对应错误对象，下面 error 就会接收
            return Promise.reject(new Error(res.msg || 'Error'))
        } else {
            // 注意返回值
            return response.data
        }
    },
    (error: any) => {
        Toast.clear()
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '请求错误(400)'
                    break
                case 401:
                    error.message = '未授权,请登录(401)'
                    break
                case 403:
                    error.message = '拒绝访问(403)'
                    break
                case 404:
                    error.message = `请求地址出错: ${error.response.config.url}`
                    break
                case 405:
                    error.message = '请求方法未允许(405)'
                    break
                case 408:
                    error.message = '请求超时(408)'
                    break
                case 500:
                    error.message = '服务器内部错误(500)'
                    break
                case 501:
                    error.message = '服务未实现(501)'
                    break
                case 502:
                    error.message = '网络错误(502)'
                    break
                case 503:
                    error.message = '服务不可用(503)'
                    break
                case 504:
                    error.message = '网络超时(504)'
                    break
                case 505:
                    error.message = 'HTTP版本不受支持(505)'
                    break
                default:
                    error.message = `连接错误: ${error.message}`
            }
        } else {
            if (error.message == 'Network Error') {
                error.message == '网络异常，请检查后重试！'
            }
            error.message = '连接到服务器失败，请联系管理员'
        }
        Toast(error.message)
        // store.auth.clearAuth()
        store.dispatch('clearAuth')
        return Promise.reject(error)
    }
)

export default service

接口管理

在src/api 文件夹下统一管理接口

• 你可以建立多个模块对接接口, 比如 home.ts 里是首页的接口这里讲解 authController.ts
• url 接口地址，请求的时候会拼接上 config 下的 baseApi
• method 请求方法
• data 请求参数 qs.stringify(params) 是对数据系列化操作
• loading 默认 false,设置为 true 后，显示 loading ui 交互中有些接口需要让用户感知

import request from '@/utils/request'
export interface IResponseType
 {
    code: number
    msg: string
    data: P
}
interface IUserInfo {
    id: string
    avator: string
}
interface IError {
    code: string
}
export const fetchUserInfo = () => {
    return request>({
        url: '/user/info',
        method: 'get',
        loading: true
    })
}

如何调用

由于awaitWrap类型推导很麻烦，所以还是采用 try catch 来捕获错误，既能捕获接口错误，也能捕获业务逻辑错误

onMounted(async () => {
    try {
        let res = await fetchUserInfo()
        console.log(res)
    } catch (error) {
        console.log(error)
    }
})

▲ 回顶部

✅ Vuex 状态管理

目录结构

├── store
│   ├── modules
│   ├── |── Auth
│   ├── ├── ├── index.ts
│   ├── ├── ├── interface.ts
│   ├── ├── └── types.ts
│   ├── index.ts
│   ├── getters.ts

类型定义

• 模块类型

interface.ts

import { IUserInfo } from '@/api/interface'

/**
 * 用户信息
 */
export interface IAuthState {
    userInfo: IUserInfo
}

index.ts

import { Module } from 'vuex'
import { IGlobalState } from '@/store/index'
import { IAuthState } from '@/store/modules/Auth/interface'
import * as Types from '@/store/modules/Auth/types'

const state: IAuthState = {
    userInfo: {}
}

const login: Module = {
    namespaced: true,
    state,
    mutations: {
        [Types.SAVE_USER_INFO](state, data) {
            state.userInfo = data
        }
    },
    actions: {
        async [Types.SAVE_USER_INFO]({ commit }, data) {
            return commit(Types.SAVE_USER_INFO, data)
        }
    }
}

export default login

• 全局 store 类型

将模块类型导入到 index.ts,定义全局类型

import { IAuthState } from './modules/Auth/interface'

export interface IGlobalState {
    auth: IAuthState
}

const store = createStore({
    getters,
    modules: {
        auth
    }
})

export default store

main.ts 引入

import { createApp } from 'vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

使用

import { fetchUserInfo } from '@/api/authController.ts'
import { useStore } from 'vuex'
import * as Types from '@/store/modules/Auth/types'
import { IGlobalState } from '@/store'

export default defineComponent({
    name: 'about',
    props: {},
    setup(props) {
        const store = useStore()
        const userInfo = computed(() => {
            return store.state.auth.userInfo
        })
        onMounted(async () => {
            try {
                let res = await fetchUserInfo()
                if (res.code !== 0) return new Error(res.msg)
                // Action 通过 store.dispatch 方法触发
                store.dispatch(`auth/${Types.SAVE_USER_INFO}`, res.data)
            } catch (error) {
                console.log(error)
            }
        })
        return {
            userInfo
        }
    }
})

▲ 回顶部

✅ Vue-router

本案例主要采用 history 模式，开发者根据需求修改 mode base

前往:vue.config.js 基础配置

import { createRouter, createWebHistory } from 'vue-router'
import { constantRouterMap } from './router.config'

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    // 在按下 后退/前进 按钮时，就会像浏览器的原生表现那样
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return { top: 0 }
        }
    },
    routes: constantRouterMap
})

export default router

import { RouteRecordRaw } from 'vue-router'

export const constantRouterMap: Array = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/layouts/index.vue'),
        redirect: '/home',
        meta: {
            title: '首页',
            keepAlive: false
        },
        children: [
            {
                path: '/home',
                name: 'Home',
                component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/home/index.vue'),
                meta: { title: '首页', keepAlive: false, showTab: true }
            },
            {
                path: '/demo',
                name: 'Dome',
                component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/dome/index.vue'),
                meta: { title: '首页', keepAlive: false, showTab: true }
            },
            {
                path: '/about',
                name: 'About',
                component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/about/index.vue'),
                meta: { title: '关于我', keepAlive: false, showTab: true }
            }
        ]
    }
]

更多:Vue Router

▲ 回顶部

✅ Webpack 4 vue.config.js 基础配置

如果你的 Vue Router 模式是 hash

publicPath: './',

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一直

publicPath: '/app/',

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
    // publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
    publicPath: '/app/', // 署应用包时的基本 URL。  vue-router history模式使用
    outputDir: 'dist', //  生产环境构建文件的目录
    assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
    lintOnSave: !IS_PROD,
    productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    devServer: {
        port: 9020, // 端口号
        open: false, // 启动后打开浏览器
        overlay: {
            //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
            warnings: false,
            errors: true
        }
        // ...
    }
}

▲ 回顶部

✅ 配置 alias 别名

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
    chainWebpack: config => {
        // 添加别名
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('api', resolve('src/api'))
            .set('views', resolve('src/views'))
            .set('components', resolve('src/components'))
    }
}

▲ 回顶部

✅ 配置 proxy 跨域

如果你的项目需要跨域设置，你需要打来 vue.config.js proxy 注释 并且配置相应参数

!!!注意：你还需要将 src/config/env.development.js 里的 baseApi 设置成 '/'

module.exports = {
    devServer: {
        // ....
        proxy: {
            //配置跨域
            '/api': {
                target: 'https://test.xxx.com', // 接口的域名
                // ws: true, // 是否启用websockets
                changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

使用 例如: src/api/home.js

export function getUserInfo(params) {
    return request({
        url: '/api/userinfo',
        method: 'post',
        data: qs.stringify(params)
    })
}

▲ 回顶部

✅ 配置 打包分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    chainWebpack: config => {
        // 打包分析
        if (IS_PROD) {
            config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
                {
                    analyzerMode: 'static'
                }
            ])
        }
    }
}

npm run build

▲ 回顶部

✅ 配置 externals 引入 cdn 资源

这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可
以实际测试一下。

另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名）

因为页面每次遇到 <% } %>

▲ 回顶部

✅ 去掉 console.log

保留了测试环境和本地环境的 console.log

npm i -D babel-plugin-transform-remove-console

在 babel.config.js 中配置

// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
const plugins = [
    [
        'import',
        {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        },
        'vant'
    ]
]
// 去除 console.log
if (IS_PROD) {
    plugins.push('transform-remove-console')
}

module.exports = {
    presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]],
    plugins
}

▲ 回顶部

✅ splitChunks 单独打包第三方模块

module.exports = {
    chainWebpack: config => {
        config.when(IS_PROD, config => {
            config
                .plugin('ScriptExtHtmlWebpackPlugin')
                .after('html')
                .use('script-ext-html-webpack-plugin', [
                    {
                        // 将 runtime 作为内联引入不单独存在
                        inline: /runtime\..*\.js$/
                    }
                ])
                .end()
            config.optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                    // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
                    commons: {
                        name: 'chunk-commons',
                        test: resolve('src/components'),
                        minChunks: 3, //  被至少用三次以上打包分离
                        priority: 5, // 优先级
                        reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
                    },
                    node_vendors: {
                        name: 'chunk-libs',
                        chunks: 'initial', // 只打包初始时依赖的第三方
                        test: /[\\/]node_modules[\\/]/,
                        priority: 10
                    },
                    vantUI: {
                        name: 'chunk-vantUI', // 单独将 vantUI 拆包
                        priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
                        test: /[\\/]node_modules[\\/]_?vant(.*)/
                    }
                }
            })
            config.optimization.runtimeChunk('single')
        })
    }
}

▲ 回顶部

✅ gzip 压缩

可能会报错，安装低版本
参考地址https://www.cnblogs.com/wuzhiquan/p/14179388.html

// * 打包gzip
const assetsGzip = config => {
    config.plugin('compression-webpack-plugin').use(require('compression-webpack-plugin'), [
        {
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.html$|\.json$|\.css/,
            threshold: 10240, // 只有大小大于该值的资源会被处理 10240
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
            deleteOriginalAssets: true // 删除原文件
        }
    ])
}

▲ 回顶部

✅ uglifyjs 压缩

需要注意，使用此插件，需要把 es6 代码转成 es5 代码，此项目没有使用

// * 代码压缩
const codeUglify = config => {
    config.plugin('uglifyjs-webpack-plugin').use(require('uglifyjs-webpack-plugin'), [
        {
            uglifyOptions: {
                //生产环境自动删除console
                compress: {
                    drop_debugger: true,
                    drop_console: false,
                    pure_funcs: ['console.log']
                }
            },
            sourceMap: false,
            parallel: true
        }
    ])
}

▲ 回顶部

✅ vconsole 移动端调试

参考地址：https://github.com/AlloyTeam/AlloyLever
参考地址：https://www.cnblogs.com/liyinSakura/p/9883777.html

• 在组件中设置暗门，点击几次显示 vconsole
  • 在 app.vue 中通过 limit 进行设置
  • 开发测试环境点击一次就可显示
  • 生产环境点击 5 次

teleport

官方文档:https://v3.cn.vuejs.org/guide/teleport.html

以前的弹框之类的组件哪里引用，dom 元素就在哪里，它可以帮助我们把这些代码从组件代码中分离开，方便我们更好查看 dom 元素组成

useDOMCreate 可以帮助我们便捷创建 dom 元素，这样就不需要在 index.html 去创建 teleport 需要的 dom 元素了

▲ 回顶部

✅ 动态设置 title

export const useDocumentTitle = (title: string) => {
    document.title = title
}

router/index.ts 使用

router.beforeEach((to, from, next) => {
    useDocumentTitle(to.meta.title)
    next()
})

▲ 回顶部

✅ 本地存储 storage 封装

案例在：dome/storage/index.vue 下

引用：

import { storage } from '@/utils/storage'

调用：

storage.set('data', originalData.value)
storageData.value = storage.get('data')

▲ 回顶部

✅ 配置 Jssdk

TODO： 待更新

安装：

yarn add weixin-js-sdk

类型声明写在了 model/weixin-js-sdk.d.ts

由于苹果浏览器只识别第一次进入的路由，所以需要先处理下配置使用的 url

• router.ts
  此处的jssdk配置仅供演示，正常业务逻辑需要配合后端去写

import { isWeChat } from '../utils/index'
import { fetchWeChatAuth } from '@/api/WxController'
import { getQueryParams, phoneModel } from '@/utils'
import store from '@/store'

// 路由开始进入
router.beforeEach((to, from, next) => {
  //! 解决ios微信下，分享签名不成功的问题,将第一次的进入的url缓存起来。
  if (window.entryUrl === undefined) {
    window.entryUrl = location.href.split('#')[0]
  }
    const { code } = getQueryParams()
        // 微信浏览器内微信授权登陆
        // && !store.state.auth.userInfo.name
        if (isWeChat()) {
            if (code) {
                store.commit('auth/STE_ISAUTH', true)
                store.commit('auth/STE_CODE', code)
            }
            if (!store.state.auth.isAuth) {
                location.href = fetchWeChatAuth()
            }
        }
  next()
})
router.afterEach((to, from, next) => {
  let url
  if (phoneModel() === 'ios') {
    url = window.entryUrl
  } else {
    url = window.location.href
  }
    // 保存url
  store.commit('link/SET_INIT_LINK', url)
})

store/Link

import { Module } from 'vuex'
import { IGlobalState } from '@/store/index'
import { ILinkState } from '@/store/modules/Link/interface'

const state: ILinkState = {
  initLink: ''
}

const login: Module = {
  namespaced: true,
  state,
  mutations: {
    ['SET_INIT_LINK'](state, data) {
      console.log(data)
      state.initLink = data
    }
  },
  actions: {}
}

export default login

由于window没有entryUrl变量，需要声明文件进行声明

typings.ts

declare interface Window {
  entryUrl: any
}

创建 hooks 函数

hooks/useWxJsSdk.ts

每个页面使用jssdk，都需要调用一次useWxJsSdk,然后再使用其他封装的函数

调用：

▲ 回顶部

✅ Eslint + Pettier 统一开发规范

参考Typescript的代码检查

VScode 安装 eslint prettier vetur 插件

在文件 .prettierrc 里写 属于你的 pettier 规则
或者prettier.config.js

module.exports =  {
  "wrap_line_length": 120,
  "wrap_attributes": "auto",
  "eslintIntegration":true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ],
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 2,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号 avoid
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准 always
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf auto
    endOfLine: 'lf'
}

.eslintrc.js 配置

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    // 禁止使用 var
    'no-var': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-empty-function': 0,
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/interface-name-prefix': 0,
    '@typescript-eslint/no-explicit-any': 0 // TODO
  }
};

Vscode setting.json 设置

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[tavascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 保存时用eslint格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 两者会在格式化js时冲突，所以需要关闭默认js格式化程序
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "vetur.format.defaultFormatter.html": "none",
  // js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    }
  ],
  "typescript.tsdk": "node_modules/typescript/lib"
}

▲ 回顶部

鸣谢

vue-h5-template
vue-cli4-config
vue-element-admin