一、vite

之前写了一个vite的项目，配置找了半天，结果如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'const resolve = dir => path.join(__dirname,dir)export default defineConfig({resolve:{alias:{'@':resolve('./src'),views:resolve('src/views'),utils:resolve('src/utils'),hooks:resolve('src/hooks'),}},plugins: [vue()]
})

二、webpack

想着webpack应该会简单点吧，然后翻车了...最终其实有两种方式

方式一

const { defineConfig } = require('@vue/cli-service')
const path = require('path') //试过用import直接报错了const resolve = dir => path.join(__dirname,dir)module.exports = defineConfig({transpileDependencies: true,configureWebpack:{resolve:{alias:{'@':resolve('./src'),views:resolve('src/views'),utils:resolve('src/utils'),hooks:resolve('src/hooks'),}}}
})

方式二

const { defineConfig } = require('@vue/cli-service')
const path = require('path')const resolve = dir => path.join(__dirname,dir)module.exports = defineConfig({transpileDependencies: true,chainWebpack: config => {config.resolve.alias.set("@", resolve("src")).set("views", resolve("src/views")).set("utils", resolve("src/utils")).set("hooks", resolve("src/hooks"))}
})

参考地址：Vue 全局引入 sass 文件 | 吴品诚的技术博客

vite以及webpack(@vue/cli 5.x) vue3 alias别名配置相关推荐

Vue CLI 3 安装、创建、配置、安装插件
一.安装 1.全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它: npm uninstall vue-cli -g //或者 yarn global remove vue-cli 注 ...
Vue CLI 3结合Lerna进行UI框架设计
第一次在掘金发文章,有点啰里啰嗦,大家见谅. 当前大部分UI框架设计的Webpack配置都相对复杂,例如Element.Ant Design Vue和Muse-UI等Vue组件库.例如Element, ...
自学Vue3+electron(一) 配置项目
时间:2022年5月3日18:17:54 version: Vue: 3.2.13 electron: 13.0.0 写在前面: node.js等知识及相关配置我就不在这里提了,如果那些还没看的话,就 ...
Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？
本文完整版:<Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗> Vite 与 Vue Cli 对比一.Vite 与 Vue CLI 是什么? Vu ...
vuecli启动的服务器位置,webpack – 在vue cli 3生成的项目中启动dev服务器
我使用npm i -g @ vue / cli在我的 Windows系统上全局安装了vue cli 3. 然后我使用vue create vue-project生成了一个项目我通过提示选择了所需的插 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
Vue CLI和Vite
一. Vue CLI安装和使用 1.1 安装全局安装,任何时候都可以通过vue的命令来创建项目 npm install @vue/cli -g 1.2 升级如果是旧版本,可通过该命令升级 npm ...
Vue3脚手架安装vue @/cli
@vue/cli是一个Vue脚手架,用来快速构建模块化项目结构系统环境: -node环境:node -v -npm环境:npm -v -nrm环境: nrm ls 安装node.js 网址:http ...

vite以及webpack(@vue/cli 5.x) vue3 alias别名配置

一、vite

二、webpack

方式一

方式二

vite以及webpack(@vue/cli 5.x) vue3 alias别名配置相关推荐

最新文章

热门文章