Vue3在Vite中的配置

 

创建vue3项目

使用vue脚手架创建vue项目

好处：基于vite构建,并且不需要自己配置vue-router,pinia,eslint,vitest等

npm init vue@latest

参考

https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

 

直接使用vite创建vue3项目

好处：项目比较清洁

坏处：需要自己配置vue-router,pinia,eslint,vitest等

npm create vite@latest

参考

https://cn.vitejs.dev/guide/

 

 

 

配置scss并使用

提出问题

单个文件引入时，需要在每个 style lang="scss" scoped标签下这样引入,每次都要手动引入非常麻烦，因此就想做全局配置

@import "@/assets/scss/global.scss"

 

解决方案

1.下载好sass 和 sass-loader

npm install sass --save-dev
npm install sass-loader --save-dev

2.在vite中配置

// vite.config.ts
export default defineConfig({
  .......,
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 两种方式都可以
        additionalData: '@import "@/assets/scss/global.scss";'
        // additionalData: '@use "@/assets/scss/global.scss" as *;'
      }
    }
  },
  ....
})

 

// global.scss
$font-color-gray:rgb(147,147,147);

3.在vue项目中使用

<script setup lang="ts"></script>

<template>
........
</template>

<style lang="scss" scoped>
.publish-info {
          font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans',
            sans-serif;
          font-size: 12px;
          line-height: 12px;
          color: $font-color-gray; // 这里引入
}
</style>

注意事项

在main.js中不要再次引入global.scss文件，否则会报已经加载过的错误。

 

修改启动端口

vite的缺省端口是3000，如果需要修改这个端口，可以编辑文件package.json，在scritps中找到启动命令，这里是dev，在vite后面增加--port 5419。这样，启动端口就修改为5419.

"dev": "vite --port 5419",