开发环境使用https配置

开发环境使用https配置

在vite.config.js

js 复制代码

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx"; // 引入 JSX 插件
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { resolve } from "path";
// import optionConfig from './oss.config';
// import vitePluginAliOss from 'vite-plugin-ali-oss';
import momConfig from "./mom.config";
import { createHtmlPlugin } from "vite-plugin-html";
// 引入postcss-x2rem
import px2rem from "postcss-px2rem"; // 分辨率适配
import basicSsl from "@vitejs/plugin-basic-ssl";

const pathResolve = (dir) => {
  return resolve(__dirname, ".", dir);
};
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const prod = process.env.NODE_ENV === "production";
  let base = momConfig.biuldBasePath;
  let plugins = [
    vue(),
    vueJsx(), // 启用 JSX 支持
    basicSsl(), // 加入这一行即可
    AutoImport({
      imports: [
        "vue",
        "vue-router",
        "pinia",
        // 可添加更多预设，如 '@vueuse/core'
      ],
      dts: "./auto-imports.d.ts", // 指定生成的声明文件路径
      eslintrc: {
        enabled: true, // 生成 .eslintrc-auto-import.json 供 ESLint 使用
      },
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    /** 配置向html文件中注入数据的插件，向html文件中注入配置数据 */
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          ...momConfig,
        },
      },
      template: "/index.html", // 指定根路径下的HTML模板文件
    }),
  ];
  return {
    base: base, // must be URL when build
    plugins: plugins,
    build: {
      /** 指定输出路径 */
      outDir: "dist",
      //   关闭文件计算
      reportCompressedSize: false,
      //   关闭生成map文件 可以达到缩小打包体积
      sourcemap: false, // 这个生产环境一定要关闭，不然打包的产物会很大
      assetsDir: "static/assets",
      rollupOptions: {
        //不对文件名使用 hash
        output: {
          entryFileNames: `static/js/[name]-[hash].js`,
          chunkFileNames: `static/js/[name]-[hash].js`,
          assetFileNames: `static/[ext]/[name]-[hash].[ext]`,
          dir: "dist",
        },
      },
    },
    // css 分辨率适配
    css: {
      postcss: {
        plugins: [
          px2rem({
            //配置rem基准值 基准大小 baseSize
            remUnit: 150, // 设计稿尺寸1920/10
          }),
        ],
      },
    },
    resolve: {
      alias: {
        "@": pathResolve("./src"),
      },
    },
    server: {
      port: 9050,
      // host: true,
      open: true,
      host: "0.0.0.0", // 必须，让服务监听所有网络接口，平板才能访问
      https: true, // 启用 HTTPS
      proxy: {
        "/auth": {
          target: "http://192.168.10.37:9702",
          changeOrigin: true,
          secure: false,
          // rewrite: (path) => path.replace(/^\/api/, ""),
        },
        "/system": {
          target: "http://192.168.10.37:9702",
          changeOrigin: true,
          secure: false,
        },
        "/qms": {
          target: "http://192.168.10.37:9702",
          changeOrigin: true,
          secure: false,
        },
        "/mes": {
          target: "http://192.168.10.37:9702",
          changeOrigin: true,
          secure: false,
        },
      },
    },
    chainWebpack(config) {
      config.module
        .rule("css")
        .test(/\.css$/)
        .oneOf("vue")
        .use("px2rem-loader")
        .loader("px2rem-loader")
        .options({
          remUnit: 192,
          remPrecision: 8,
        })
        .end();
    },
  };
});

bash 复制代码

配置    
https: true, // 启用 HTTPS
      proxy: {
        "/auth": {
          target: "http://192.168.10.37:9702",
          changeOrigin: true,
          secure: false,
          // rewrite: (path) => path.replace(/^\/api/, ""),
        },
        "/system": {
          target: "http://192.168.10.37:9702",
          changeOrigin: true,
          secure: false,
        },
}，可以多配置几个路径代理

不过要在配置开发路径的地方设置

js 复制代码

// 外部配置项
window._APP_CONFIG_ = {
  backConfig: "", // 开发环境：
  customConfig: "http://192.168.10.000:9000", // (生产环境)
};