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

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

一、初始化

• 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. type 为 module
  • 2. src 路径要用绝对路径
    

• 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

  

二、配置

• 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

  

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

  

• 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-sass、 sass-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"
    	]
    }
    

    配置完毕后，我们看下效果，生效
    

• 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.js：vite 配置

    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

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

    

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

    

    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')
    

    

  • 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单页应用