创建vue3项目遇到的部分问题及解决方式

Swn_

已于 2024-05-13 10:29:26 修改

阅读量182

点赞数 1

文章标签： vue 前端

于 2024-04-12 10:34:38 首次发布

本文链接：https://blog.csdn.net/Swn__/article/details/136174785

版权

文章介绍了如何在使用Vite构建Vue+TypeScript项目时，处理HTTPS配置、CORS、插件引入及Vue组件路径问题。作者提供了安装依赖、配置全局路径和解决找不到模块的建议。

摘要由CSDN通过智能技术生成

在这里插入图片描述


 export default defineConfig({
   server: {
      // https: true,// 启用https协议，默认是HTTP协议
      host: true, // 监听所有地址
      port: 1314,// 前端项目启动的端口号
      open: true,// 开启代理
      cors: false, // 为开发服务器配置 CORS
      proxy: {
         '^/api': {
            target: '',// 服务器地址
            changeOrigin: true,// 开启代理
            ws: true,  // 开启 websockets 代理
            rewrite: (path) => path.replace(/^\/api/, '')// 请求接口重写
         }
      }
   }
})

参考链接：https://blog.csdn.net/fmoment/article/details/132128836

问题1

在这里插入图片描述
解决方式：首先安装 npm install --save-dev @types/node在vite.config.ts里面增加
import path from 'path'

问题2：

在这里插入图片描述

解决
下载 npm i @vitejs/plugin-vue 在 vite.config.js加入 import vue from '@vitejs/plugin-vue'
和plugins: [vue()],

import type { UserConfig, ConfigEnv } from 'vite'
   import { defineConfig, loadEnv } from 'vite'
   import path from 'path'
   import vue from '@vitejs/plugin-vue'
   export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
      // const root = process.cwd()
      // 加载环境变量
      // const env = loadEnv(mode, root, '')
      // const { VUE_APP_BASE_API, VUE_APP_BASE_URL } = env
      return {
        resolve: {
          alias: {// 配置全局相对路径
            '@': path.resolve(__dirname, 'src')
          }
       },
       css: {
          preprocessorOptions: {
                scss: {// 导入scss的全局默认配置
                   additionalData: '@import "@/assets/scss/index.scss";'
                }
          }
       },
       plugins: [vue()],
         server: {
            // https: true,// 启用https协议，默认是HTTP协议
            host: true, // 监听所有地址
            port: 1314,// 前端项目启动的端口号
            open: true,// 开启代理
            cors: false, // 为开发服务器配置 CORS
            proxy: {
              '^/api': {
                target: '',// 服务器地址
                changeOrigin: true,// 开启代理
                ws: true,  // 开启 websockets 代理
                rewrite: (path) => path.replace(/^\/api/, '')// 请求接口重写
              }
            }
         }  
      }
   })

--------------------------------------2024.05.13更新---------------------------------------

问题3：

vue+ts+vite 新建项目出现：找不到模块 "@/views/home/home.vue" 问题
在这里插入图片描述
解决办法：
在根目录下创建一个 env.d.ts 文件，里面写入以下代码：

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
 }