开发环境和生产环境打包配置

最新推荐文章于 2024-02-22 11:01:17 发布

馍馍是只猫

最新推荐文章于 2024-02-22 11:01:17 发布

阅读量162

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_48702212/article/details/132061171

版权

.env.development

#axios  baseUrl和生产环境VITE_APP_BASE_API不能相同,不然会找不到文件原因是server.proxy会修改文件路径

VITE_APP_SERVER = 'http://172.25.1.56:8080/sgccstabilitytool' # tao
VITE_APP_AXIOS_BASE_API = '/dev-api'   
VITE_APP_BASE_API = '/digital-stability'

.env.production

#生产环境配置baseurl应对nginx转发  如果不需要nginx转发  那么baseUrl改为 './'
VITE_APP_BASE_API = '/digital-stability'

request.ts

import { ElMessage } from 'element-plus'
import { AxiosRequest, CustomResponse } from './interface'

import instance from './interceptors'

class Request {
    // baseURL
    protected baseURL: string = import.meta.env.VITE_APP_AXIOS_BASE_API

    // 自定义表头
    protected headers: object = {
        ContentType: 'application/json;charset-UTF-8'
    }

    private apiAxios<T>({
        baseURL = this.baseURL,
        headers = this.headers,
        method,
        url,
        data,
        params,
        responseType
    }: AxiosRequest): Promise<CustomResponse<T>> {
        // url解析
        // const _url = url.split('.')
        // url = getUrl(_url[0], _url[1])

        return new Promise((resolve, reject) => {
            instance({
                baseURL,
                headers,
                method,
                url,
                params,
                data,
                responseType
            })
                .then(res => {
                    console.log('apiAxios res ', res)
                    // 200:服务端业务处理正常结束
                    if (res.status !== 200) {
                        resolve({
                            status: false,
                            message: '操作失败',
                            data: undefined
                        })
                        return
                    }
                    if (res.data.code === '200') {
                        resolve({
                            status: true,
                            message: 'success',
                            data: res.data?.data,
                            origin: res.data
                        })
                    } else {
                        // ElMessage({
                        //     message: '操作失败',
                        //     type: 'error'
                        // })
                        resolve({
                            status: false,
                            message: res.data?.msg || `${url} failed`,
                            data: res.data,
                            origin: res.data
                        })
                    }
                })
                .catch(err => {
                    console.error(err)
                    ElMessage({
                        message: err.message || '操作异常',
                        type: 'error'
                    })
                })
        })
    }

    protected get<T>({
        baseURL,
        url,
        params,
        data,
        headers,
        responseType
    }: AxiosRequest): Promise<CustomResponse<T>> {
        return this.apiAxios<T>({
            baseURL,
            headers,
            method: 'GET',
            url,
            data,
            params,
            responseType
        })
    }

    protected post<T>({
        baseURL,
        url,
        params,
        data,
        headers,
        responseType
    }: AxiosRequest): Promise<CustomResponse<T>> {
        return this.apiAxios<T>({
            baseURL,
            headers,
            method: 'POST',
            url,
            data,
            params,
            responseType
        })
    }

    protected put<T>({
        baseURL,
        url,
        params,
        data,
        headers,
        responseType
    }: AxiosRequest): Promise<CustomResponse<T>> {
        return this.apiAxios<T>({
            baseURL,
            headers,
            method: 'PUT',
            url,
            data,
            params,
            responseType
        })
    }

    protected delete<T>({
        baseURL,
        url,
        params,
        data,
        headers,
        responseType
    }: AxiosRequest): Promise<CustomResponse<T>> {
        return this.apiAxios<T>({
            baseURL,
            headers,
            method: 'DELETE',
            url,
            data,
            params,
            responseType
        })
    }
}

export default Request

vite.config.ts

import { defineConfig, loadEnv } from 'vite'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

const TIME_STAMP = new Date().getTime()
// https://cn.vitejs.dev/config/
export default ({ mode }) => {
    const ENV = loadEnv(mode, process.cwd())
    return defineConfig({
        define: {
            'process.env': ENV
        },
        base: ENV.VITE_APP_BASE_API, // 公共基础路径
        // mode: 'development',
        publicDir: 'public',
        server: {
            host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
            port: 9999, // 端口 默认3000
            strictPort: true, // true时端口被占用时退出
            https: false, // 启用 TLS + HTTP/2。
            open: true, // 运行时自动打开默认浏览器
            // 为开发服务器配置自定义代理规则。
            proxy: {
                [ENV.VITE_APP_AXIOS_BASE_API]: {
                    target: ENV.VITE_APP_SERVER,
                    changeOrigin: true,
                    rewrite: path =>
                        path.replace(ENV.VITE_APP_AXIOS_BASE_API, '')
                }
            },
            cors: false, // 为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用。
            hmr: true, // 禁用或配置 HMR 连接（用于 HMR websocket 必须使用不同的 http 服务器地址的情况,默认打开,否则无法热更新）。
            base: '', // undefined | string 在 HTTP 请求中预留此文件夹，用于代理 Vite 作为子文件夹时使用。应该以 / 字符开始和结束。
            headers: {} // 指定服务器响应的header
        },
        build: {
            minify: 'esbuild', // 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。Benchmarks
            outDir: 'dist', // 指定输出路径（相对于 项目根目录).
            assetsDir: 'assets', // 指定生成静态资源的存放路径（相对于 build.outDir）。
            assetsInlineLimit: 4096, //(4kb) 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。(如制定了build.lib，无论大小都会内联)
            // manifest: true, // 当设置为 true，构建后将会生成 manifest.json 文件，包含了没有被 hash 过的资源文件名和 hash 后版本的映射。可以为一些服务器框架渲染时提供正确的资源引入链接。当该值为一个字符串时，它将作为 manifest 文件的名字。
            ssrManifest: true, // 当设置为 true 时，构建也将生成 SSR 的 manifest 文件，以确定生产中的样式链接与资产预加载指令。当该值为一个字符串时，它将作为 manifest 文件的名字。
            cssCodeSplit: true, // 弃用/禁用 css代码拆分。如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
            // cssTarget: 'modules', // 此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target，此处的 target 并非是用于 JavaScript 转写目标。
            sourcemap: false, // 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件。如果为 'inline'，source map 将作为一个 data URI 附加在输出文件中。'hidden' 的工作原理与 'true' 相似，只是 bundle 文件中相应的注释将不被保留。
            rollupOptions: {
                output: {
                    // manualChunks: {
                    //     // 拆分代码，这个就是分包，配置完后自动按需加载，现在还比不上webpack的splitchunk，不过也能用了。
                    //     vue: ['vue', 'vue-router', 'vuex'],
                    //     vant: ['vant']
                    // },
                    entryFileNames: `assets/[name]-${TIME_STAMP}.js`,
                    chunkFileNames: `assets/[name]-${TIME_STAMP}.js`,
                    assetFileNames: `assets/[name]-${TIME_STAMP}.[ext]`
                }
            },
            // terserOptions: {
            //     compress: {
            //         // warnings: false,
            //         drop_console: true, //打包时删除console
            //         drop_debugger: true, //打包时删除 debugger
            //         pure_funcs: ['console.log']
            //     },
            //     output: {
            //         // 去掉注释内容
            //         comments: true
            //     }
            // },
            reportCompressedSize: false // 启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
        },
        plugins: [
            vue(),
            createSvgIconsPlugin({
                iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
                symbolId: 'icon-[dir]-[name]'
            })
        ],
        resolve: {
            alias: [
                {
                    find: '@',
                    replacement: resolve(__dirname, './src')
                }
            ],
            extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] //加入这段代码
        },
        css: {
            modules: {},
            preprocessorOptions: {
                scss: {
                    additionalData: `
                    @import "@/assets/style/common/_variables.scss";
                    @import "@/assets/style/common/_function.scss";
                    @import "@/assets/style/common/_mixin.scss";`
                },
                styl: {}
            }
        }
    })
}