Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境

上篇文章我们对比了 ViteWebpack 的差异。接下来,准备将项目中用到的 Webpack 5.0 替换为 Vite 2.0,我们先着手从零配置开发/生产环境。

文章目录

        • 一、初始化
          • 1. 初始化 `package.json`
          • 2. 安装 `Vite` (`node`版本要求 `14.18 +`)
          • 3. 初始化项目
          • 4. 配置打包命令
        • 二、配置
          • 1. 基础配置
          • 2. 配置开发环境
          • 3. 配置 `CSS` 预处理器以及前缀
          • 4. 配置 `vue 3.0` 开发环境
            • 4.1 安装依赖
            • 4.2 配置 `vue` 环境
            • 4.3 配置 `vue-router` 路由
            • 4.4 配置 `vuex` 状态管理
            • 4.5 配置 `element` 组件库
          • 5. 配置生产环境
        • 三、结束
        • 四、相关文章

一、初始化

  • 1. 初始化 package.json

    npm init // 一路回车

  • 2. 安装 Vite (node版本要求 14.18 +)

    yarn add vite --dev 或者 npm install vite -D

  • 3. 初始化项目

    初始化目录结构 config/vite.config.js 配置文件、index.html 出口文件、index.js 入口文件、src 目录源码

    因为 Vite 是基于 ESM 通过 HTTP 请求获取所需的文件,所以入口的 index.js 要注意:

    • 1. typemodule
    • 2. src 路径要用绝对路径
      Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第1张图片
  • 4. 配置打包命令

    package.json:这里的 --open 指的打开窗口,-c 指的使用自定义的配置,-m 指定环境 development 或者 production

    "scripts": {
    	"dev": "vite serve -c ./config/vite.config.js -m development --open",
    	"build": "vite build -c ./config/vite.config.js -m production"
    }
    

    查看更多配置: npx vite --help

    Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第2张图片

二、配置

  • 1. 基础配置

    配置过 wepback 的同学,相信看到这份配置并不陌生,相比 webpack,配置简化很多。还不会 webpack 配置的同学建议先熟悉 webpack 的配置。点击进入:Webpack 4.X 从零配置SPA单页应用

    import { defineConfig } from 'vite'
    import { resolve } from 'path'
    
    export default defineConfig({
      root: process.cwd(), // 项目根目录
      base: '/', // 项目基准路径,默认 /
      publicDir: 'public', // 静态资产的目录,默认 public
      cacheDir: 'node_modules/.vite', // esbuild预构建缓存(依赖/缓存)
      resolve: {
        // 项目别名
        alias: {
          '@': resolve(__dirname, '../src'),
          'pages': resolve(__dirname, '../src/pages')
        },
      	extensions: ['.js', '.vue', '.json'] // 引入对应的文件时可以忽略其后缀
      }
    })
    

    到这里开发环境就可以跑起来,因为 Vite 帮我们配置了默认的 dev server,直接执行 npm run dev,发现报错,缺少 esbuild 依赖,安装依赖 npm install esbuild-windows-64 -D

    Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第3张图片

    安装成功后,重新执行 npm run dev ,启动成功,因为这里使用默认的配置,为了方便拓展,我们这里要重新配置 dev server

    Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第4张图片

  • 2. 配置开发环境
    server: {
    	 host: '0.0.0.0', // 服务器主机名,如果允许外部访问,可设置为 "0.0.0.0"
    	 port: 3000, // 服务器端口号:默认3000,如果被占用,自动切换
    	 open: true, // 是否自动打开浏览器
    	 strictPort: false, // 设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口
    	 force: true, //是否强制依赖预构建
    	 proxy: proxyConfig // 代理
    }
    
    // proxyConfig.js: 
    
    export default {
    	 '/api': {
    	   target: 'http://xxx.com',
    	   changeOrigin: true,
    	   rewrite: path => path.replace(/^\/api/, '')
    	 },
    	 '/socket.io': {
    	   target: 'ws://localhost:3000',
    	   ws: true
    	 }
    }
    
  • 3. 配置 CSS 预处理器以及前缀

    如果使用 sass,无需下载 node-sasssass-loader 包, 直接安装 sass,这里我们使用 less,直接下载 less

    npm i less autoprefixer postcss -D

    • 配置 less 预处理器
      import { resolve } from 'path'
      
      export default defineConfig({
      	...
      	css: {
      		preprocessorOptions: {
      			less: {
      				  additionalData: `@import "${resolve(__dirname, '../src/assets/css/common.less')}";`, // 配置 less 全局变量
      				  javascriptEnabled: true
      			}
      		},
      		devSourcemap: true, // 在开发过程中是否启用 sourcemap
      	}
      })
      
    • 配置 autoprefixer 前缀自动补全
      postcss.config:配置 autoprefixer
      module.exports = {
      	"plugins": {
      	    "autoprefixer": {},
      	}
      }
      
      package.json 配置兼容处理
      {
      	 "browserslist": [
      		 "defaults",
      		 "not ie < 11",
      		 "last 2 versions",
      		 "> 1%",
      		 "iOS 7",
      		 "last 3 iOS versions"
      	]
      }
      
      配置完毕后,我们看下效果,生效
      Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第5张图片
  • 4. 配置 vue 3.0 开发环境
    • 4.1 安装依赖

      1、安装 vue 环境:npm i vue -D 或者 yarn add vue --dev
      2、安装 vue plugin:npm i @vitejs/plugin-vue -D 或者 yarn add @vitejs/plugin-vue --dev

    • 4.2 配置 vue 环境

      vite.config.jsvite 配置

      import vue from '@vitejs/plugin-vue'
      
      export default defineConfig({
      	 plugins: [
      	 	vue()
      	 ]
      })
      

      index.js:入口文件

      import { createApp } from 'vue'
      import App from './App.vue'
      const app = createApp(App)
      	
      app.mount('#root')
      

      App.vue:父组件

      <template>
      	<div class="container">
      	 {{ num }}
      	</div>
      </template>
      
      <script>
      import { ref, onBeforeMount } from 'vue'
      
      export default {
      	setup() {
      	 let num = ref(0)
      	
      	 onBeforeMount(_ => {
      	   console.log(num.value)
      	 })
      	
      	 return { num }
      	}
      }
      </script>
      
      <style lang="less">
      .app {
      	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif !important; /*网页默认字体,顺序优先级*/
      	font-size: 16px; /*网页默认字体大小*/
      	user-select: none; /*页面文字禁止选中*/
      	-webkit-font-smoothing: antialiased; /*字体进行抗锯齿渲染*/
      	-moz-osx-font-smoothing: grayscale; /*字体进行抗锯齿渲染*/
      	box-sizing: border-box !important; /*解决怪异盒模型*/
      	-webkit-backface-visibility: hidden; /*使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug*/
      	-webkit-tap-highlight-color: transparent; /*cursor为pointer时,移动端会有蓝色背景:*/
      	scroll-behavior: smooth; /*浏览器默认滚动触发时添加过渡动画*/
      	transform: translateZ(0); /*硬件加速*/
      }
      </style>
      

      跑起来试试,npm run dev,完美

      在这里插入图片描述

    • 4.3 配置 vue-router 路由

      npm i vue-router@4 -S

      router/index.js 路由配置,这里要路由模式参数为 history 而非 mode,可以从去源码查看他的参数

      import { createRouter, createWebHashHistory } from 'vue-router'
      
      const Home = () => import('../pages/home')
      
      const routes = [
        {
          path: '/',
          redirect: {
            path: '/Home'
          }
        },
        {
          path: '/Home',
          name: 'Home',
          component: Home
        }
      ]
      
      export default createRouter({
        history: createWebHashHistory(),
        routes,
      })
      
    • 4.4 配置 vuex 状态管理

      npm i vuex@next -S

      store/index.js:状态管理模块,新版本的内置了 createLogger ,直接引入即可

      import { createStore, createLogger } from 'vuex'
      import app from './module/app'
      
      export default createStore({
        modules: {
          app // 单个管理模块
        },
        plugins: [ createLogger ], // 修改 state 时打印日志
        strict: true // 严格模式,不允许直接修改 state
      })
      

      home.vue:单个路由组件使用

      <template>
        <div>Home</div>
      </template>
      
      <script>
      import { ref, onMounted } from 'vue'
      import { useStore } from 'vuex'
      
      export default {
        setup() {
          let store = useStore()
      
          onMounted(_ => {
      	  // 获取配置文件
            store.dispatch('_getConfig', { mode: 'T' })
          })
      
          return { store }
        }
      }
      </script>
      
    • 4.5 配置 element 组件库

      npm install element-plus -S

      !!! 安装时,可能会报以下错误,这个查阅是 esbuildbug,处理方法:当前目录下执行:node ./node_modules/esbuild/install.js

      Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第6张图片

      执行命令后,再次下载,完美解决

      Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第7张图片

      index.js引入使用,这里一定要注意顺序,先加载插件,再去挂载

      import { createApp } from 'vue'
      import element from 'element-plus'
      import '@/assets/css/index.css'
      import App from './App'
      const app = createApp(App)
      
      app.use(element)
      app.mount('#root')
      

      Vue 3.0 全家桶 + Vite 从零配置开发环境、生产环境_第8张图片

    • 5. 配置生产环境
      import { resolve } from 'path'
      
      export default defineConfig({
        ...
        build: {
      	    outDir: resolve(__dirname, '../dist'), // 指定输出路径(相对于 项目根目录)
      	    assetsDir: 'static', // 指定生成静态资源的存放路径(相对于 build.outDir)
      	    cssCodeSplit: true, // 启用 CSS 代码拆分
      	    chunkSizeWarningLimit: 500, // chunk 大小警告的限制(以 kbs 为单位)
      	    sourcemap: false // 构建后是否生成 source map 文件
        }
      })
      

      如果想根据不同的环境来切换不同的配置,可以在根目录下建立 .env.[mode],这里的 mode 也就是当前的环境

      .env                # 所有情况下都会加载
      .env.local          # 所有情况下都会加载,但会被 git 忽略
      .env.[mode]         # 只在指定模式下加载
      .env.[mode].local   # 只在指定模式下加载,但会被 git 忽略
      

      当前也可以根据当前的环境变量,执行一些特定的逻辑

      • import.meta.env.MODE: {string} 应用运行的模式
      • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由 base 配置项决定。
      • import.meta.env.PROD: {boolean} 应用是否运行在生产环境
      • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD 相反)

三、结束

至此,一个简单实用的 vite + vue 3.0 工程基本搭建完毕,之后会添加 eslint 代码规范、 vuex hooks 集成、cdn 加载、Typescript 环境等

四、相关文章

  • Vite 配置 CDN资源加载
  • Vite 配置 Eslint 规范代码
  • Vite 是否可以代替 Webpack ?
  • Webpack 5 新特性
  • Webpack 4.X 从零配置SPA单页应用

你可能感兴趣的:(Vue,前端技能,Vite,vue.js,javascript,前端)