开发环境升级成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'