主题
简介
前端首先由 Vue3
构建,所以要想写前端第一步要先看vue3 文档。 第二还需要 typescript 的加持
INFO
如果不想用使用 ts,直接在根目录 tsconfig.json
关闭即可
这两个是项目的根基,所以一定要好好看看,其他用到的主要组件
vite 配置
这里就直接用项目的配置一一说明了,不拆开来看了
js
const rootPath = resolve(__dirname)
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
plugins: [
vue({
script: {
defineModel: true
}
}),
vueJsx(),
alias({
entries: [
{
find: '@',
replacement: resolve(rootPath, './src')
}
]
}),
{
// 监听views文件夹下的vue文件变化,自动重启
configureServer(server) {
server.watcher.on('add', (path) => {
if (path.includes('views') && path.endsWith('.vue')) {
server.restart()
}
})
}
},
AutoImport({
imports: ['vue', 'vue-router', 'pinia', '@vueuse/core']
// resolvers: [ ElementPlusResolver({importStyle: 'sass'}) ]
}),
Components({
dirs: ['src/components/', 'src/layout/'],
extensions: ['vue'],
// directoryAsNamespace: true,
deep: true,
dts: true,
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/, 'src/components/catchForm/']
// resolvers: [ ElementPlusResolver({ importStyle: 'sass'}) ]
}),
Icons({
compiler: 'vue3',
autoInstall: true
})
],
publicDir: './public',
define: {
BASE_URL: env.BASE_URL
},
preprocessorOptions: {
scss: {
// additionalData: `@use "@/public/assets/styles/element.scss" as *;`,
}
},
server: {
hmr: true,
host: '127.0.0.1',
port: 10086,
open: true, // 自动打开浏览器
cors: true, // 允许跨域
strictPort: true, // 端口占用直接退出
watch: {},
proxy: {
// 处理跨域
'/api': {
target: env.VITE_BASE_URL, // 后端接口地址
changeOrigin: true, // 修改请求头中的 origin 为目标地址
rewrite: (path) => path.replace(/^\/api/, '') // 可选:移除请求路径中的 /api 前缀
}
}
},
build: {
// 打包文件大小警告的限制(单位kb)
chunkSizeWarningLimit: 2000,
minify: 'terser',
terserOptions: {
compress: {
drop_console: false,
pure_funcs: ['console.log', 'console.info'],
drop_debugger: true
}
},
// 打包输出目录
outDir: '../public/admin',
assetsDir: 'assets',
rollupOptions: {
input: './index.html',
output: {
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
}
}
}
}
})
INFO
vite 的环境变量都需要在前面加上 VITE
前缀,在 vite.config.js 使用的时候直接访问 env.BASE_URL
即可
但是如果打包的话,还需要添加 .env.production
配置文件,里面配置
js
// api url 接口地址
VITE_BASE_URL = API_URL