Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to configure vite.config.js, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to configure vite.config.js. Let's take a look at it.

1 how to create a vite project? Step 1: npm init vite@latest yarn create vitestep2: npm init vite@latest my-vue-app-- template vue npm 7 characters, need extra double lines: npm init vite@latest my-vue-app-template vue # yarnyarn create vite my-vue-app-- how does template vue2 make the browser open automatically when the vite project starts?

Note: vite defines three options for the development environment, packaging environment, and preview environment: server, build, and preview. The development environment server is similar to devServer in webpack.

Export default ({mode}) = > {return defineConfig ({server: {open:true, / / vite project automatically opens the browser},}} 3vite launches the default port is 3000? How do I change the default port? Export default ({mode}) = > {return defineConfig ({server: {port:8080, / / custom port when the vite project starts},}} 4 how does vite set hot updates?

The vite default development environment turns off hot updates. Code changes need to be updated manually. Setting the change code to automatically refresh the page requires setting hmr:true.

Export default ({mode}) = > {return defineConfig ({server: {hmr:true, / / enable hot update},}} how to configure the alias path in 5vite?

Set resolver options

Import {resolve} from 'path'; export default ({mode}) = > {return defineConfig ({resolve: {alias: {"@": resolve (_ _ dirname, "src"), "@ c": resolve (_ _ dirname, "src/components"),}} how to set convenient image path references in 6 vite?

For example, the image resources are all in the src/assets/image directory, and you don't want to write a long list of references through require (".. / assets/image/1.jpg") every time in the project. Is it possible to use quick references similar to those in nuxt?

Here we directly refer to export default ({mode}) = > {return defineConfig ({resolve: {"/ images": "src/assets/images/" / / the spelling of the path cannot be parsed through the path module}},}} 7 how to classify the js,css and img resources after vite packaging in the js/css/img folder? / / because you are dealing with packaged resources. So you need to configure the build option export default ({mode}) = > {return defineConfig ({build: {assetsDir: "static", rollupOptions: {input: {index:resolve (_ _ dirname, "index.html"), project:resolve (_ _ dirname, "project.html")}, output: {chunkFileNames:'static/js/ [name]-[hash] .js' EntryFileNames: "static/js/ [name]-[hash] .js", assetFileNames: "static/ [ext] / name- [hash]. [ext]"},},}} 8 how to configure multiple environments for a project through vite?

Take the development, test and production environment as an example

(1) create new .env.development, .env.test, .env.production files under the root directory of the project.

/ / .env.devopment file content NODE_ENV= "development" VITE_APP_BASEAPI= "https://www.dev.com"//.env.test file content NODE_ENV=" test "VITE_APP_BASEAPI=" https://www.test.com"//.env.production file content NODE_ENV= "production" VITE_APP_BASEAPI= "https://www.production.com"

(2) modify the package.json file as follows

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

(3) obtain the value of the corresponding environment through Import.meta.env.VITE_APP_BASEAPI in the project

Import {defineComponent, onMounted, ref} from 'vue' import Item from "@ c/item.vue" console.log ("env", import.meta.env.VITE_APP_BASEAPI) console.log ("optional chain", obj?.gender | | "male")}) 9 how to configure multiple portals for multi-page development?

Step1: create a new entry page in the root directory, take project.html as an example, create a new project folder in the root directory, and create a new main.js,App.vue in this folder

Step2:vite.config.js makes the following modifications:

Import {defineConfig,loadEnv} from 'vite'import {resolve} from "path" Export default ({mode}) = > {return defineConfig ({build: {rollupOptions: {index:resolve (_ _ dirname, "index.html"), project:resolve (_ _ dirname, "project.html")}, / / output: {/ / chunkFileNames:'static/js/ [name]-[hash] .js', / / entryFileNames: "static/js/ [name]-[hash] .js" / / assetFileNames: "static/ [ext] / name- [hash]. [ext]"},}, plugins: [vue (),]})}

View the project project localhost:3000/project.html in url plus project.html after step3:vite run dev startup

10 how to set up and turn on the file size function of production package analysis? Similar to webpack-bundle-analyzer?//1 installation rollup-plugin-visualizer plug-in npm I rollup-plugin-visualizer//2 vite.config.js introduces plug-ins import {visualizer} from "rollup-plugin-visualizer" export default ({mode:string}) = > {const plugins= [vue (), AutoImport ({resolvers: [ElementPlusResolver ()],}), Components ({resolvers: [ElementPlusResolver ()]}), visualizer ({open:true) / / Note that it should be set to true. Otherwise invalid gzipSize:true, brotliSize:true})] } return defineConfig ({resolve: {"@": resolve (_ _ dirname, "src"), "/ images": "src/assets/images/"}}, plugins}) 11 how to solve the problem of require is not define reporting errors? Scene: for example, we have a static json: list under our assets folder: [{shop_id:1, shop_name:' hunter Art Life', products: [{pro_id:101 Text:' facial Cleanser', price:480, num:1, img:require (". / images/1.png"), sum:480 Checked:false// merchandise selection status}, {pro_id:102, text:' flower dew', price:680 Num:1, img:require ('. / images/2.png'), sum:680, checked:false}, {pro_id:103 Text:' oatmeal', price:380, num:1, img:require ('. / images/3.png'), sum:380 Checked:false}], check:false,// store selection status choose:0,// items selected}, {shop_id:2, shop_name:' roll flagship store' Products: [{pro_id:201, text:' razor', price:580, num:1 Img:require ('. / images/4.png'), sum:580, checked:false}, {pro_id:202 Text:' toilet paper', price:780, num:1, img:require ('. / images/5.png'), sum:780 Checked:false}], check:false, choose:0,},], status:false,// all selected status allchoose:0,// Store selected number of allsum:0,// Total Price allnum:0 / / Total quantity} export default fetchData

When you run at this time, you will find an error: require is not define? Solution:

Const fetchData= {list: [{shop_id:1, shop_name:' hunter Art Life', products: [{pro_id:101 Text:' facial Cleanser', price:480, num:1, img:new URL (". / images/1.png", import.meta.url). Href, sum:480 Checked:false// merchandise selection status}, {pro_id:102, text:' flower dew', price:680 Num:1, img:new URL ('. / images/2.png',import.meta.url). Href, sum:680, checked:false}, {pro_id:103 Text:' oatmeal', price:380, num:1, img:new URL ('. / images/3.png',import.meta.url). Href, sum:380 Checked:false}], check:false,// store selection status choose:0,// items selected}, {shop_id:2, shop_name:' roll flagship store' Products: [{pro_id:201, text:' razor', price:580, num:1 Img:new URL ('. / images/4.png',import.meta.url). Href, sum:580, checked:false}, {pro_id:202 Text:' toilet paper', price:780, num:1, img:new URL ('. / images/5.png',import.meta.url). Href, sum:780 Checked:false}], check:false, choose:0,},], status:false,// all selected status allchoose:0,// Store selected number of allsum:0,// Total Price allnum:0 / / Total quantity} export default fetchData

Notice the change in citation: require- > new URL ('. / images/5.png',import.meta.url). Href

This is the end of the article on "how to configure vite.config.js". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to configure vite.config.js". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.