【Vue3+js+vite】vue3项目实战部署+新api 持续更新~~

最新推荐文章于 2024-08-14 15:57:42 发布

SecondEno

最新推荐文章于 2024-08-14 15:57:42 发布

阅读量692

点赞数

分类专栏： Vue3.0 vite 文章标签： javascript vue.js npm

本文链接：https://blog.csdn.net/SecondEno/article/details/122982083

版权

Vue3.0 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vite

2 篇文章 0 订阅

订阅专栏

本文介绍了使用Vite 2.7.2和Vue 3.2.25进行项目部署的配置步骤，包括npm与node版本管理、服务器设置、代理配置以及 vite 的热更新特性。通过设置别名加快构建速度，并利用Vite的预处理选项处理全局SCSS文件。此外，详细阐述了如何配置代理以实现API请求的转发。

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

个人经验仅供参考

项目部署

版本管理

npm与node

node版本16.12.0
npm版本8.1.0

Vue与vite

vue版本3.2.25

vue: "^3.2.25",

vite版本2.7.2

vite: "^2.7.2"

vite配置

如官网所言vite本地开发热更新只会关注真正的使用到的包或代码，所以每次构建速度很快只有在引入一个新包后时间略长之后的更新时间会恢复到正常状态。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
    //vue2.x习惯配置@为根目录
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,//启动端口
    open: true,
    strictPort: true,
    //代理
    proxy: {
      '/api': {
        target: 'xxxxxx',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    },
    cors: true
  },
  css: {
    // 引用全局 scss
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./normalize.scss";'
      }
    },
  },

  build: {
  //暂时还没有需要特殊处理的打包选项，一般处理静态资源打包方式居多
  }
})