开发环境Vuecli3升级Vite2

356 阅读1分钟

开发环境升级成vite2,遇到的问题点,记录方便查阅: 未完继续...

vue文件中require引入img

//old:
data(){
    return {
        logo:require('Assets/img/logo.png')
    }
}
//新
import logo from 'Assets/img/logo.png'
data(){
    return {
        logo,
    }
}

环境变量

vite版本 vite@2.8.6

.env.development

VITE_APP_BASE_API_URL=http://xxxxxxxx

vite.config.js

//解析路径
const path = require("path");
const resolve = dir => {
  return path.resolve(__dirname, dir);
};

import { defineConfig, loadEnv } from "vite";
import { createVuePlugin } from "vite-plugin-vue2"; //解析vue2.x

export default ({ mode }) => {
  //mode环境模式development、production
  const { VITE_APP_BASE_API_URL } = loadEnv(mode, process.cwd()); //自定义环境变量
  console.log("当前模式:", mode,'接口地址:', VITE_APP_BASE_API_URL);

  return defineConfig({
    ...
  });
};

main.js

window.isDev = import.meta.env.MODE === "development"; //全局设置环境变量

login.vue

create(){
    console.log(isDev)
}

@import引入less

vite 不识别 ‘~’,使用 alias 给 ~ 设置别名也无效,不知道是不是我打开方式不对

//原 @import "~ant-design-vue/dist/antd.less";

@import "../../node_modules/ant-design-vue/dist/antd.less";

App.vue

//引入全局less
//原 @import '~assets/css/main.css'
@import 'assets/css/main.css'