Vue 3.0 Family Bucket + Vite는 개발 환경과 프로덕션 환경을 처음부터 구성합니다.

지난 글에서 우리는 Vite와 의 차이점을 비교했습니다 Webpack. 다음으로, 프로젝트에 사용된 Webpack 5.0것을 교체하기 위해 Vite 2.0먼저 개발/생산 환경을 처음부터 구성하는 작업에 착수했습니다.

1. 초기화

• 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하기 때문에 입구에서는 다음 사항에 주의해야 합니다.ESMHTTPindex.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

  

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

  

  설치 성공 후 다시 실행하여 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
  	 }
  }
  

• CSS3. 전처리기 및 접두사 구성

  를 사용한다면 다운로드 나 패키징이 sass필요없이 바로 설치하면 됩니다 . 여기서는 를 사용하여 직접 다운로드합니다.node-sasssass-loadersasslessless

  npm i 덜 자동 접두어 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.04. 개발 환경 구성

  • 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 설치 요소 플러스 -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)

3. 종료

이제 간단하고 실용적인 vite+ vue 3.0프로젝트는 기본적으로 구축되었으며, eslint코드 스펙, vuex hooks통합, cdn로딩, Typescript환경 등은 추후 추가될 예정입니다.

4. 관련 기사

• Vite는 CDN 리소스 로딩을 구성합니다.
• Vite는 Eslint 사양 코드를 구성합니다.
• Vite가 Webpack을 대체할 수 있나요?
• 웹팩 5의 새로운 기능
• Webpack 4.X는 SPA 단일 페이지 애플리케이션을 처음부터 구성합니다.