Vite2.0 + Vue3.0 搭建步骤

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

小燕呀

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

阅读量770

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43848495/article/details/114535860

版权

本文详细介绍了如何使用Vite2.0和Vue3.0搭建项目，包括初始化设置、安装路由、Vuex、SCSS以及环境变量配置。还展示了如何配置package.json进行不同环境的打包，并提供了vite.config.js的配置示例。文章强调了在Vite中获取环境变量的新方法import.meta.env。

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

Vite2.0 + Vue3.0 搭建步骤

npm init @vitejs/app or yarn create @vitejs/app
安装路由 npm install vue-router@next -S

import { createRouter, createWebHistory } from 'vue-router'
import defaultRoutes from './routes';

const routes = defaultRoutes
//不需要验证的路由
const disableAuthRoutes = {
  '/login': 1,
  '/404': 1,
};

const router = createRouter({
  history: createWebHistory(),
  routes,
})
router.beforeEach((to, from, next) => {
  //====================================登陆验证=================================
  console.log(import.meta.env)
  if (disableAuthRoutes[to.path]) return next();//不需要验证
  //default
  next();
});

router.afterEach(() => {

});

export default router

安装vuex npm i vuex@next -S

import { createStore } from "vuex";
import system from './modules/system'
import user from './modules/user'

const store = createStore({
    modules: {
        system,
        user,
    },
    state: {},
    mutations: {},
    actions: {},
});
export default store

安装scss yarn add sass(或者npm i less --save)
根目录下新建.env.development，.env.test,.env.production

.env.development
################################本地开发环境##############################
#   请求域名前缀
VITE_APP_URL = "本地接口地址"
#   axios超时时间(单位毫秒)
VITE_APP_AXIOS_TIMEOUT = "20000"

.env.test
################################测试环境##############################
#指定NODE_ENV为production，不能删除
NODE_ENV='production'
#   请求域名前缀
VITE_APP_URL = "测试环境地址"
#   axios超时时间(单位毫秒)
VITE_APP_AXIOS_TIMEOUT = "20000"

.env.production
################################生产环境##############################
#指定NODE_ENV为production，不能删除
NODE_ENV='production'
#   请求域名前缀
VITE_APP_URL = "生产环境地址"
#   axios超时时间(单位毫秒)
VITE_APP_AXIOS_TIMEOUT = "20000"

6.配置package.json，打包区分生产和测试环境

"scripts": {
    "dev": "vite",
    "build-test": "vite build --mode test",
    "build-production": "vite build --mode production",
    "serve": "vite preview"
  },

7.vite.config配置

//生产环境---静态常量
const PRODUCTION = 'production';
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require("path");
const root = process.cwd();

export default ({command, mode}) => {
  //viteEnv   env常量
  const viteEnv = loadEnv(mode, root);
  return defineConfig({
    plugins: [vue()],
    resolve: {
      //别名配置
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@views': path.resolve(__dirname, './src/views'),
      },
    },

    base: PRODUCTION === mode ? '/mm/' : './',
    css: {
      // css预设器配置项
      preprocessorOptions: {
        scss: {
          // 所有 SCSS 前插入变量
          additionalData: `
        @import "@/assets/styles/variables.scss";
        @import "@/assets/styles/extends/index.scss";
        @import "@/assets/styles/mixins/index.scss";
        `,
        },
      },
    },
    build: {
      //浏览器兼容性
      target: 'es2015',
      //输出目录
      outDir: 'dist',
      //指定生成静态资源的存放路径
      assetsDir: 'assets',
      //启用/禁用 CSS 代码拆分。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在块加载时插入。
      // 如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中。
      cssCodeSplit: true,
      //在构建生产包时生成 sourceMap 文件
      sourcemap: PRODUCTION !== mode,
      //启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
      brotliSize: false,
    },
    server: {
      proxy: {
        '/api': {
          target: 'http://jsonplaceholder.typicode.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  });
}