✨《Vue3环境配置神操作！零基础3分钟搞定多环境开发/打包（附避坑指南）》

最新推荐文章于 2025-06-09 20:17:55 发布

庸俗今天不摸鱼

最新推荐文章于 2025-06-09 20:17:55 发布

阅读量532

点赞数 15

CC 4.0 BY-SA版权

文章标签： vue.js 学习系统架构

本文链接：https://blog.youkuaiyun.com/yong_su/article/details/145614125

1.找到环境变量配置文件，里面配置的文件实际上就是一个全局变量

请添加图片描述

开发环境配置：

# 页面标题
VUE_APP_TITLE = 标题

# 开发环境配置
ENV = 'development'

#开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# 开发环境地址
VUE_APP_BASE_URL = '生产环境地址'

生产环境配置：

# 页面标题
VUE_APP_TITLE = 标题

# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = '/prod-api'

# 生产环境地址
VUE_APP_BASE_URL = '生产环境地址'

测试环境配置：

# 页面标题
VUE_APP_TITLE = 标题

# 测试环境配置
ENV = 'staging'

# 测试环境
VUE_APP_BASE_API = '/stage-api'

# 测试环境地址
VUE_APP_BASE_URL = '生产环境地址'

vue.config.js配置代理：

"use strict";
const path = require("path");

function resolve(dir) {
    return path.join(__dirname, dir);
}
const name = process.env.VUE_APP_TITLE || "shukun"; // 网页标题
const port = process.env.port || process.env.npm_config_port || 80; // 端口
module.exports = {
 publicPath: "./",
    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
    outputDir: "ROOT",
    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: "static",
    // 是否开启eslint保存检测，有效值：ture | false | 'error'
    lintOnSave: false,
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    // webpack-dev-server 相关配置
    devServer: {
        host: "0.0.0.0",
        port: port,
        open: false, //启动后默认打开浏览器  true 打开  false 关闭
        // 代理
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: `http://localhost:8080`,
                changeOrigin: true,
                pathRewrite: {
                    ["^" + process.env.VUE_APP_BASE_API]: ""
                }
            }
        },
        disableHostCheck: true
    },
    configureWebpack: {
        name: name,
        resolve: {
            extensions: ['.js', '.vue', '.json', '.ts'],
            alias: {
                "@": resolve("src")
            }
        }
    },
}

packge.json配置打包和启动脚本

"scripts": {
        "dev": "vue-cli-service serve",//默认开发环境启动
        "build": "vue-cli-service build --mode development",//开发环境打包
        "build:stage": "vue-cli-service build --mode staging",//测试环境打包
        "stage": "vue-cli-service serve --mode staging",//测试环境启动
        "preview": "node build/index.js --preview",
        "lint": "eslint --ext .js,.vue src",
        "build:prod": "vue-cli-service build --mode production",//生产环境打包
        "prod": "vue-cli-service serve --mode production"//生产环境启动
    },

vite 打包 config.js文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name: string) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    // open: true,
    // host: "127.0.5.1",
    // port: 9000, //配置开发服务器的端口
    // 开发服务器 非开发环境需要代理：Nginx反向代理

    proxy: {
      '/basic-api': {
        target: 'http://192.168.xxx.xxxx:8080', // 代理的目标地址
        changeOrigin: true, // 开启跨域
        rewrite: (path) => path.replace(/^\/basic-api/, '')
      }
    }
  }
})

echarts 模板可用网站 (总有一个合适的)

https://madeapie.com/#/

https://www.makeapie.cn/echarts_category/series-bar

http://chart.365api.cn/#/

https://www.isqqw.com/

http://ppchart.com/#/

超爽配置

vscode 点击设置打开 settings.json 中配置

“editor.wordSeparators”: “`~!@#$%^&*()=+[{]}\|;:'”,.<>/?"
双击选中- —— _ 链接的类名例如：“mg-y-sm”

输入效果配置

// power mode 插件配置
"powermode.enabled": true, //启动效果
"powermode.presets": "particles", // flames 火花效果、  particles 粒子、 magic 魔法、 fireworks 烟花、 clippy 曲别针  
"powermode.enableShake": false, // 关闭代码抖动 「建议关闭，开启容易眼睛花」