Vue3 vite配置css 的sourceMap及文件引用配置别名的过程
作者：任磊abc
这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vite 2.9配置浏览器加载 CSS 源映射
vite.config.ts，有一个devSourcemap属性css可以设置为true。
这是vite.config.ts我目前正在使用的文件：
export default defineConfig({
plugins: [
vue(),
checker({
typescript: true,
vueTsc: true,
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
css: {
devSourcemap: true,
},
});引用文件配置别名
export default ({ mode, command }) => {
console.log(command);
// console.log(mode);
const boo = mode === 'dev';
const alias = {
'@': path.resolve(__dirname, './src'),
pages: path.resolve(__dirname, './src/pages'),
assets: path.resolve(__dirname, './src/assets'),
images: path.resolve(__dirname, './src/assets/image'),
store: path.resolve(__dirname, './src/store'),
plugins: path.resolve(__dirname, './src/plugins'),
components: path.resolve(__dirname, './src/components')
};
// if (boo) {
alias['vue-i18n'] = 'vue-i18n/dist/vue-i18n.cjs.js';
// }
return defineConfig({
server: {
host: '0.0.0.0',
port: 85
},
css: {
devSourcemap: boo
},
resolve: {
alias
},
/* proxy: {
'/api': {
target: 'http://localhost:3333/',
changeOrigin: true,
ws: true,
rewrite: (pathStr) => pathStr.replace('/api', '')
}
} */
});
};到此这篇关于Vue3 vite配置css 的sourceMap ,以及文件引用配置别名的文章就介绍到这了,更多相关Vue3 vite配置sourceMap内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！