Vue 3.0 Family Bucket + Vite configure l'environnement de développement et l'environnement de production à partir de zéro

Dans le dernier article, nous avons comparé les différences Viteentre et Webpack. Webpack 5.0Ensuite, pour préparer le remplacement de celui utilisé dans le projet Vite 2.0, nous avons d'abord commencé à configurer l'environnement de développement/production à partir de zéro.

1. Initialisation

• 1. Initialisationpackage.json

  npm init// Entre jusqu'au bout

• 2. Installation Vite( nodeexigences de version 14.18 +)

  yarn add vite --devounpm install vite -D

• 3. Initialiser le projet

  config/vite.config.jsFichier de configuration de la structure du répertoire d'initialisation , index.htmlfichier d'exportation, index.jsfichier d'entrée, srccode source du répertoire

  Parce Vitequ'il s'agit ESMd' HTTPune demande d'obtention des fichiers requis, l'entrée index.jsdoit donc prêter attention à :

  • 1. typepourmodule
  • 2. srcLe chemin doit utiliser un chemin absolu.
    

• 4. Configurer les commandes d'empaquetage

  package.json: Ici, --openil s'agit de l'ouverture de la fenêtre, -cde l'utilisation d'une configuration personnalisée, -mde la spécification de l'environnement developmentouproduction

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

  Voir plus de configurations :npx vite --help

  

2.Configuration

• 1. Configuration de base

  Les étudiants qui ont configuré wepback, Je pense que cette configuration leur est familière. Par rapport à webpack, la configuration est beaucoup plus simple. webpackIl est recommandé aux étudiants qui ne savent pas comment le configurer de se familiariser webpackd'abord avec la configuration. Cliquez pour entrer : Webpack 4.X Configurer l'application SPA monopage à partir de zéro

  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'] // 引入对应的文件时可以忽略其后缀
    }
  })
  

  L'environnement de développement peut être démarré ici, car il Vitenous a aidé à configurer la valeur par défaut dev server, à l'exécuter directement npm run dev, à trouver les erreurs et les dépendances manquantes esbuild, à installer les dépendances.npm install esbuild-windows-64 -D

  

  Une fois l'installation réussie, réexécutez npm run devet démarrez avec succès. Étant donné que la configuration par défaut est utilisée ici, afin de faciliter l'expansion, nous devons la reconfigurer ici.dev server

  

• 2. Configurer l'environnement de développement

  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. Configurez CSSle préprocesseur et le préfixe

  S'il est utilisé sass, il n'est pas nécessaire de le télécharger node-sassou sass-loaderde l'emballer, il suffit de l'installer directement sass. Ici, nous utilisons less, téléchargez-le directement.less

  npm j'ai moins de préfixe automatique postcss -D

  • Configurer lessle préprocesseur

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

  • autoprefixerAuto-complétion du préfixe de configuration
    postcss.config : Configurationautoprefixer

    module.exports = {
            
            
    	"plugins": {
            
            
    	    "autoprefixer": {
            
            },
    	}
    }
    

    package.jsonTraitement de compatibilité de configuration

    {
            
            
    	 "browserslist": [
    		 "defaults",
    		 "not ie < 11",
    		 "last 2 versions",
    		 "> 1%",
    		 "iOS 7",
    		 "last 3 iOS versions"
    	]
    }
    

    Une fois la configuration terminée, examinons l'effet et prenons effet.
    

• 4. Configurer vue 3.0l'environnement de développement

  • 4.1 Installer les dépendances

    1. vueEnvironnement d'installation : npm i vue -D ou Yarn Add Vue --dev
    2. Installation vue plugin: npm i @vitejs/plugin-vue -D ou Yarn Add @vitejs/plugin-vue --dev

  • 4.2 vueEnvironnement de configuration

    vite.config.js: viteConfiguration

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

    index.js: Fichier d'entrée

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

    App.vue: composant parent

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

    Essayez-le en courant, npm run devparfait

    

  • 4.3 Configurer vue-routerle routage

    npm je vue-router@4 -S

    router/index.jsConfiguration du routage, ici le paramètre du mode de routage ne l'est historypasmode , vous pouvez visualiser ses paramètres depuis le code source

    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 vuexGestion de l'état de la configuration

    npm je vuex@next -S

    store/index.js: Le module de gestion des statuts est intégré dans la nouvelle version createLogger et peut être introduit directement.

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

    home.vue: Utilisé par un seul composant de routage

    <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 elementBibliothèque de composants de configuration

    npm installer élément-plus -S

    !!! Lors de l'installation, l'erreur suivante peut être signalée. Cette requête est esbuild, buget la méthode de traitement est : exécuter dans le répertoire courant :node ./node_modules/esbuild/install.js

    

    Après avoir exécuté la commande, téléchargez à nouveau, solution parfaite

    

    index.js: Présentation et utilisation, vous devez faire attention à la commande ici, charger d'abord le plug-in, puis le monter

    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. Configurer l'environnement de production

    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 文件
      }
    })
    

    Si vous souhaitez basculer différentes configurations selon différents environnements, vous pouvez les créer dans le répertoire racine .env.[mode], où modese trouve l'environnement actuel

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

    Actuellement, vous pouvez également exécuter une logique spécifique basée sur les variables d'environnement actuelles.

    • import.meta.env.MODE: {string} Le mode dans lequel l'application s'exécute
    • import.meta.env.BASE_URL: {string} De base lors du déploiement de l'application URL. Il est basedéterminé par les éléments de configuration.
    • import.meta.env.PROD: {boolean} Si l'application s'exécute dans un environnement de production
    • import.meta.env.DEV: {boolean} Si l'application s'exécute dans un environnement de développement (toujours l' import.meta.env.PRODinverse)

3. Fin

À ce stade, un projet vite+ simple et pratique vue 3.0a été essentiellement construit. eslintLes spécifications du code, vuex hooksl'intégration, cdnle chargement, Typescriptl'environnement, etc. seront ajoutés ultérieurement.

4. Articles connexes

• Vite configure le chargement des ressources CDN
• Vite configure le code de spécification Eslint
• Vite peut-il remplacer Webpack ?
• Webpack 5 nouvelles fonctionnalités
• Webpack 4.X configure l'application SPA d'une seule page à partir de zéro