Vue3+vite配置-优快云博客

1、配置环境变量（开发环境和生产环境）

（1）配置

通常来说，不同的环境会有不同的请求api接口，这就需要修改配置，才能满足对应的环境。所以这里就使用了环境变量。环境变量就是在不同的环境中使用不同的变量值

环境变量文件(.env) 在项目根目录（和src同级）中创建三个文件：

注意：在vite构建工具下配置,就得使用VITE的前缀名

.env.development

#【开发环境】
NODE_ENV = 'development'
VITE_APP_BASE_API = '你的地址'

.env.staging

# 【测试环境】
NODE_ENV = 'staging'
VITE_APP_BASE_API = '你的地址'

.env.production

# 【生产环境】
NODE_ENV = 'production' //李敏啊
VITE_API_BASE_URL = '你的地址'

（2）环境变量定义与获取

webpack下环境获取是这样子：

process.env.VUE_APP_API_BASE_URL

vite下更改为：

import.meta.env.VITE_API_BASE_URL

接下来我们去vite.config.js中自定义环境变量前缀及获取环境变量的配置

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
const { resolve } = require("path");
 
export default defineConfig(({command, mode }) => {
    const env = loadEnv(mode, process.cwd())
    console.log(env.VITE_APP_BASE_API) // 获取环境变量
    return {
        plugins: [vue()],
        envPrefix:  ['VITE', 'VUE'],   
        // 环境变量前缀,默认只会暴露VITE开头变量，定义后可暴露VUE开头变量
        define: {
            'process.env.VITE_APP_BASE_API':JSON.stringify(env.VITE_APP_BASE_API),
        },
    }
})

package.json多环境配置，这部分我们在package.json进行配置即可

 "scripts": { 
       "dev": "vite",            // 开发环境
       "serve": "vite preview",  // 本地预览
       "staging": "vite build --mode staging",  // 测试环境打包
       "build": "vite build",    // 生产环境打包
   },

2、Vite配置公共引用路径@

（1）引入路径和定位跟目录

打开vite.config.ts配置

import path from 'path'
resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
  },

（2）vite.config.ts完整如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
  },
})

3、配置Vite跨域以及接口

Vite 配置代理 Proxy，解决跨域

首先我们先把接口的全局给放入一个公告的文件夹下面进行使用在utils下面新建一个文件config.js，接下来公共参数放入这个里面 config.js 然后更改一下我们的 vite.config.js 这个文件

// vite.config.js
 

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

// vite 相关配置
export default defineConfig({
    server: {
        host: true, //host设置为true才可以使用network的形式，以ip访问项目
        port: 8808, // 端口号
        https: false,
        open: false, //  true 自动打开浏览器自动打开浏览器
        cors: true, // 跨域设置允许
        strictPort: true,  // 如果端口已占用直接退出
        proxy: {
            '/edu-pc': {
                target: 'http://要链接的后台地址', //线上版本
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/接口统一前缀/, '/接口统一前缀c')
            },
        },
    },
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
})

4、打包以及发布

配置打包发布

打包
yarn build

预览
yarn run preview

修改提交内容包含打包好的文件在 .gitignore文件中把dist删掉或者注释掉，才能上传dist文件（打包好的文件）到远程仓库

进行中...

5、生产环境打包上线的时候去掉console.log()

有时候我们需要在上线的时候去掉自己写的console.log()，这里非常简单，在src=> main.js里面配置一下即可

之前的vue2里面我们采用的方式如下：

直接上我们手写的部分

// 生产环境production  去除console.log()
if (process.env.NODE_ENV === 'production') {
  console.log = () => {}
  console.warn = () => {}
}

6、（其他）项目非必需

添加husky

husky 是一个 Git Hook 工具。主要实现提交前 eslint 校验和 commit 信息的规范校验，也可以避免多人合作时代码格式化不统一造成的冲突；

1.安装 husky，lint-staged

npm i -D husky lint-staged

2.在package.json中新增如下配置

{
  ...
  "scripts": {
    ...
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

7、Vue中嵌入html页面并相互通信

在之前我们的项目之中有一个需求，这里我们也简单给介绍一下如何进行使用，就是在不同的html界面或者iframe界面之间进行通讯。

html的页面是单独的一个服务，有自己独立的端口地址可以通过将src中修改需要展示的页面地址，这样做的好处是vue与iframe之间不需要通信，与后端的通信可以直接通过js发请求与后端进行交互

（1）
<iframe src="http://127.0.0.1:8081/demo31.html"  width="100%" height="800px" scrolling="auto"></iframe>


（2）
 <iframe src="/static/gantt/test.html" ref="iframe" width="100%" height="900px" scrolling="no"></iframe>