vue?serve及其與vue-cli-service?serve之間的關系解讀
一、前言
近日群里,總是是不是得,群友爆料關于“ vue命令 ”和“ vue-cli-service ”不能執(zhí)行的問題
如下,需要如何做本機“ 部署 ”和在怎樣的條件下,它們才能執(zhí)行呢:
另外,對二者的關系,做一個淺析。
二、vue命令
F:\VueExts\front-study\搭建工程\my-site> vue serve src\components\Avatar.vue Command vue serve requires a global addon to be installed. Please run npm install -g @vue/cli-service-global and try again.
意思是說,你要單獨使用 “vue serve”這個工具的話,它需要作為工具而在當前工程的上下文中“安裝”1個@vue/cli的服務的“ CLI命令行工具 ”
安裝命令格式為:
npm install -g @vue/cli-service-global
它就是@vue/cli 系統(tǒng)中的關鍵項------"服務工具包";
注意,“腳手架”工具 和 “服務工具包”是有區(qū)別的:
1、“腳手架”工具@vue/cli,簡稱CLI
1.1、安裝命令:
卸載現有版本npm uninstall @vue/cli -g
安裝指定版本npm install -g @vue/cli@4.5.0
1.2、作用:
實現的交互式的“人機會話”,來對vue進行操作
(具體vue -***命令見后續(xù)所述;包括 vue ui 執(zhí)行相關管理儀表盤)
1.3、性質:是一個全局安裝的 npm 包
提供執(zhí)行類似vue -***命令的支持 是“設計時”的工具。
2、“服務”工具@vue/cli-service-global,簡稱CLI的服務
2.1、安裝命令:
npm install -g @vue/cli-service-global # 與“所創(chuàng)建或配置”的項目匹配的版本,在當前注冊存儲庫中-g全局搜尋 npm install -g @vue/cli-service-global@4.5.19 #安裝某個指定版本
2.2、作用:
- 構建webpack和webpack-dev-server之上,打通與node.exe可執(zhí)行進程之間的通訊;
- 通過node內置的npm包管理器,通過“npm run”執(zhí)行vue-cli-service腳本和serve、build、inspect腳本命令,全靠它,來提供進程間通訊;
- vue要家在別的三方Loader,必須通過它;
- 內置了經過優(yōu)化的特定版本(與通過
@vue/cli
創(chuàng)建的項目或配置的原型項目的版本相關)的webpack(默認,vue2內置webpack3.X,vue3內置webpack4.X以上;除非“配置原型”指定package.json的屬性值)
2.3、性質:是一個局部安裝的 npm 包
是“運行時”的工具;
需要“局部安裝”在每一個獨立的 @vue/cli
創(chuàng)建的項目中。
不要將項目依賴dependencies中的鍵值對 "vue": "^2.6.11", 兩者混淆, "vue": "^2.6.11"是指的vue的產品的版本號,比如vue2或vue3的具體版本。
三、package.json的preset預置的配置命令參數
3.1、依賴與開發(fā)依賴
下面對它大致說明如下:
"dependencies": { /* 項目分發(fā)時其上下文涉及到的必要依賴項: */ "core-js": "^3.6.5", /* :JS模塊化的標準庫內核V3.*.*,現已發(fā)展到到ECMAScript2023版本 */ "vue": "^2.6.11", /* :你事前配置好的vue項目的產生或最終構建輸出的版本號及其依賴庫 */ /* :如果package.json指定了它,將按照它來產生和構建工程 */ "vue-router": "^3.2.0" /* :你事前配置好的該版本的vue的路由依賴插件 */ /* :如果package.json指定了它,將按照它來產生和構建輸出該工程 */ }, "devDependencies": { /* 項目的上下文中的進行vue的“開發(fā)時”的開發(fā)依賴庫: */ /* 通常我們“手工”在終端輸入命令安裝,一般都應當安裝對應需要的如下的開發(fā)依賴: */ "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", /* :Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) ; 或 vue-cli-plugin- (社區(qū)插件) 開頭; 無論Vue內置插件還是三方插件,均可以作為項目創(chuàng)建過程的構成, 或在后期加入到項目中。它們也可以被歸成一組可復用的preset預置 (preset可通過package.json配置)。 */ "@vue/cli-service": "~4.5.0", /* :vue的服務的命令行工具,通過它才能: 1、發(fā)出vue -***的命令來; 2、vue create 你的工程名---按照其內置“模板產生器”創(chuàng)建1個新的“模板化”結構優(yōu)化的工程 才能通過GUI指引選擇安裝的vue的版本依賴庫 (安裝完成后會覆蓋上面的"dependencies": {}對象中的vue的版本屬性) 3、......其它功能詳見下面的說明。 */ "@vue/eslint-config-prettier": "^6.0.0", "babel-eslint": "^10.1.0", /* :Babel 是一個工具鏈(可以理解為它也是js的運行時的編譯器), 主要用于將采用 ES6+ 的語法編寫的代碼轉換為向后兼容的 JS 語法, 以便能夠運行在當前和舊版本的瀏覽器或其他環(huán)境中; babel-eslint 是在babel包的技術上的子存儲庫,在其下進行eslint擴展: */ "eslint": "^6.7.2", /* :ESLint是一個用來識別 ECMAScript 并且按照規(guī)則給出報告的代碼檢測工具, 使用它可以避免低級錯誤和統(tǒng)一代碼的風格 */ "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^6.2.2", "less": "^3.0.4", /* :less語法支持的module模塊開發(fā)依賴 */ "less-loader": "^5.0.0", /* :將less語法按照“工程化模塊化”預編譯為css后并打包的“預處理器” vue內置的“css模塊化與工程化” */ /* :更多的其它“預編譯器”(“預處理器”),比如vue-loader , vue內置的“JS模塊化與工程化”: 一個其內置了的webpack的loader,可將@vue/cli-service內部的template格式SFC 或其被引用的vue組件轉換為純JavaScript模塊 */ /* :更多的其它第三方loader ---同1個目的:開發(fā)時組件的熱重載、及自動打包輸出 */ "prettier": "^2.2.1", /* :三方插件:提供代碼美化及語法高亮等功能的插件 */ "vue-template-compiler": "^2.6.11" /* :vue的所有模板的編譯器---開發(fā)時,將Vdom轉化為真實DOM的內置編譯器 其中包含了 render、mount、patch過程,以支持開發(fā)時的“熱重載”和運行時的“動態(tài)編譯” */ },
這些腳本,可以 用與node集成的npm的run命令來執(zhí)行:
"scripts": { // vue-cli-service 命令行腳本 : "serve": "vue-cli-service serve", "build": "vue-cli-service build", "inspect": "vue-cli-service inspect", // 組件級別的 單元測試 腳本 : "test:Pager": "vue serve ./src/components/Pager/test.vue", // 組件級別-單元調試 根組件,這樣是錯誤的: "test:App": "vue serve ./src/App.vue", // 組件級別-單元調試 根組件,正確的是調試“Entry入口文件”: "test:main": "vue serve ./src/main.js", }
當然,可以 用node原生命令,在環(huán)境配置無誤及命令行語法無誤的情況下 單獨執(zhí)行。
如果package.json的預配置 無誤,
你還可以直接點擊使用vscode的集成js調試終端:
JavaScript Debug Terminal :
或者使用集成的擴展調試:
NPM調試 快捷方式:
3.2、@vue/cli-service 的內部
bin\下是它的原始的js代碼:
vue-cli-service指令,它就是入口文件,然后被node.exe調用,然后分腳本關鍵詞參數,向Service服務模塊傳遞運行參數。
3.3、vue -***命令如何跑起來
因而,從原理上來講,僅有@vue/cli是不夠的,必須安裝Service服務并配以 @vue/cli-service
vue -***命令才跑得起來。
generator\下是它的的“ template模板 ”發(fā)生器:
四、vue -***命令詳解
此命令行為安裝“ vue的腳手架工具 ”后,可以執(zhí)行的vue 命令的用法。
4.1、vue 命令幫助
Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: create [options] <app-name> create a new project powered by vue-cli-service add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service serve [options] [entry] serve a .js or .vue file in development mode with zero config build [options] [entry] build a .js or .vue file in production mode with zero config ui [options] start and open the vue-cli ui init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init) config [options] [value] inspect and modify the config outdated [options] (experimental) check for outdated vue cli service / plugins upgrade [options] [plugin-name] (experimental) upgrade vue cli service / plugins migrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugin info print debugging information about your environment Run vue <command> --help for detailed usage of given command.
4.2、vue 命令做 組件級別單元測試
F:\VueExts\front-study\搭建工程\my-site >vue serve src\App.vue
F:\VueExts>vue serve -h Usage: serve [options] [entry] serve a .js or .vue file in development mode with zero config Options: -o, --open Open browser -c, --copy Copy local url to clipboard -p, --port <port> Port used by the server (default: 8080 or next available port) -h, --help output usage information F:\VueExts>cd F:\VueExts\front-study\05. 搭建工程\my-site
App.vue原本已經是入口文件main.js的頂層組件了(入口組件、或稱你當前站點的根組件)
所以,最好不要再用vue serve去做單元測試,而是直接使用,用開發(fā)服務器來測試“開發(fā)環(huán)境”的應用:
npm run serve
npm run serve作為開發(fā)服務器打包及運行的“腳本”,運行過程中,如遇到不能被瀏覽器“包容”的代碼錯誤,均會在vscode終端控制臺輸出。
五、關于很少被人使用的npm run inspect
inspect可為我們快速“ 檢查 ”開發(fā)環(huán)境的正確性,具體檢查:
- 各種插件
- 各開發(fā)依賴
- 相關配置的語法及依賴檢查
- 檢查基本的Loader
mini-css-extract-plugin的loader.js、css-loader的cjs.js、postcss-loader、babel-loader、
檢查 當前項目的上下文中,主模塊配置及其下的子模塊是否正確
- 檢查工作模式mode
- 檢查工程的上下文context、vue的開發(fā)工具devtool、node進程
- 檢查打包輸出配置output
- 檢查入口文件屬性entry,包含main.js
- 檢查Vue的擴展externals屬性
- 檢查各resolve“ 協(xié)商 ”屬性的配置是否被“ 客制化 ”
- "@" 別名指向------默認my-site\\src
- vue$: 'vue/dist/vue.runtime.esm.js'------運行時的ES模塊中vue公開的 $ 指令
- 能被識別的文件擴展名屬性------extensions : [ '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm' ]
- 當前貢獻上下文的主要依賴及開發(fā)依賴的“路徑指向
- ”modules: [ node_modules', node_modules\\@vue\\cli-service\\node_modules ]
- 默認插件的引入和調用方式plugins: [ { Function } ]默認應以js或ts的函數模塊化
- 檢查各resolveLoader“ 協(xié)商 ”打包器等模塊和插件屬性
- ------特別檢查babel代碼語法的ES兼容性插件:@vue\\cli-plugin-babel\\node_modules
- 檢查“路由”配置規(guī)則及其它任何子模塊的配置規(guī)則 config.module.rule
npm run inspect //:檢查 webpack及其關聯(lián)的 配置 // :它可以為你打印出所有直到代碼可以被“運行”的中間的“打包”過程的所有檢查。 inspect腳本:需要自己在開發(fā)站點根的package.json配置文件中設置 或 用node原生腳本運行: "scripts": { "serve": "vue-cli-service serve", /*...*/ "build": "vue-cli-service build", /*...*/ "inspect": "vue-cli-service inspect", /*...*/ "lint": "vue-cli-service lint" /* :檢查代碼是否符合ESlint代碼風格規(guī)范, eslintrc.js配置文件且設置rules規(guī)則可修改默認配置, (最好別這么做,比如指定ecmaVersion版本等): 比如:自動修復“屬性”中的空格、Tab鍵入等不規(guī)范問題等 */ /*...*/ },
可以看看npm run inspect腳本運行后的輸出:
> my-site1@0.1.0 inspect > vue-cli-service inspect { mode: 'development', context: 'F:\\VueExts\\front-study\\搭建工程\\my-site', node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, output: { path: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\dist', filename: 'js/[name].js', publicPath: '/', chunkFilename: 'js/[name].js' }, resolve: { alias: { '@': 'F:\\VueExts\\front-study\\搭建工程\\my-site\\src', vue$: 'vue/dist/vue.runtime.esm.js' }, extensions: [ '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm' ], modules: [ 'node_modules', 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules', 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\@vue\\cli-service\\node_modules' ], plugins: [ /* config.resolve.plugin('pnp') */ {} ] }, resolveLoader: { modules: [ 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\@vue\\cli-plugin-babel\\node_modules', 'node_modules', 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules', 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\@vue\\cli-service\\node_modules' ], plugins: [ /* config.resolve.plugin('pnp-loaders') */ {} ] }, module: { noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/, rules: [ /* config.module.rule('mjs') */ { test: /\.mjs$/, type: 'javascript/auto', include: [ /node_modules/ ] }, /* config.module.rule('vue') */ { test: /\.vue$/, use: [ /* config.module.rule('vue').use('cache-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\cache-loader\\dist\\cjs.js', options: { cacheDirectory: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\.cache\\vue-loader', cacheIdentifier: '153b59fa' } }, /* config.module.rule('vue').use('vue-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-loader\\lib\\index.js', options: { compilerOptions: { whitespace: 'condense' }, cacheDirectory: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\.cache\\vue-loader', cacheIdentifier: '153b59fa' } } ] }, /* config.module.rule('images') */ { test: /\.(png|jpe?g|gif|webp)(\?.*)?$/, use: [ /* config.module.rule('images').use('url-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\url-loader\\dist\\cjs.js', options: { limit: 4096, fallback: { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\file-loader\\dist\\cjs.js', options: { name: 'img/[name].[hash:8].[ext]' } } } } ] }, /* config.module.rule('svg') */ { test: /\.(svg)(\?.*)?$/, use: [ /* config.module.rule('svg').use('file-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\file-loader\\dist\\cjs.js', options: { name: 'img/[name].[hash:8].[ext]' } } ] }, /* config.module.rule('media') */ { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, use: [ /* config.module.rule('media').use('url-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\url-loader\\dist\\cjs.js', options: { limit: 4096, fallback: { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\file-loader\\dist\\cjs.js', options: { name: 'media/[name].[hash:8].[ext]' } } } } ] }, /* config.module.rule('fonts') */ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, use: [ /* config.module.rule('fonts').use('url-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\url-loader\\dist\\cjs.js', options: { limit: 4096, fallback: { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\file-loader\\dist\\cjs.js', options: { name: 'fonts/[name].[hash:8].[ext]' } } } } ] }, /* config.module.rule('pug') */ { test: /\.pug$/, oneOf: [ /* config.module.rule('pug').oneOf('pug-vue') */ { resourceQuery: /vue/, use: [ /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */ { loader: 'pug-plain-loader' } ] }, /* config.module.rule('pug').oneOf('pug-template') */ { use: [ /* config.module.rule('pug').oneOf('pug-template').use('raw') */ { loader: 'raw-loader' }, /* config.module.rule('pug').oneOf('pug-template').use('pug-plain-loader') */ { loader: 'pug-plain-loader' } ] } ] }, /* config.module.rule('css') */ { test: /\.css$/, oneOf: [ /* config.module.rule('css').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('css').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('vue-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('css').oneOf('vue-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] }, /* config.module.rule('css').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('css').oneOf('vue').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('vue').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('css').oneOf('vue').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] }, /* config.module.rule('css').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('css').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('normal-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('css').oneOf('normal-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] }, /* config.module.rule('css').oneOf('normal') */ { use: [ /* config.module.rule('css').oneOf('normal').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('css').oneOf('normal').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('css').oneOf('normal').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] } ] }, /* config.module.rule('postcss') */ { test: /\.p(ost)?css$/, oneOf: [ /* config.module.rule('postcss').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('vue-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('postcss').oneOf('vue-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] }, /* config.module.rule('postcss').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('postcss').oneOf('vue').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('vue').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('postcss').oneOf('vue').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] }, /* config.module.rule('postcss').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('normal-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('postcss').oneOf('normal-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] }, /* config.module.rule('postcss').oneOf('normal') */ { use: [ /* config.module.rule('postcss').oneOf('normal').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('postcss').oneOf('normal').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('postcss').oneOf('normal').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } } ] } ] }, /* config.module.rule('scss') */ { test: /\.scss$/, oneOf: [ /* config.module.rule('scss').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('vue-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('scss').oneOf('vue-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('scss').oneOf('vue-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false } } ] }, /* config.module.rule('scss').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('scss').oneOf('vue').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('vue').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('scss').oneOf('vue').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('scss').oneOf('vue').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false } } ] }, /* config.module.rule('scss').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('normal-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('scss').oneOf('normal-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('scss').oneOf('normal-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false } } ] }, /* config.module.rule('scss').oneOf('normal') */ { use: [ /* config.module.rule('scss').oneOf('normal').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('scss').oneOf('normal').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('scss').oneOf('normal').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('scss').oneOf('normal').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false } } ] } ] }, /* config.module.rule('sass') */ { test: /\.sass$/, oneOf: [ /* config.module.rule('sass').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('vue-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('sass').oneOf('vue-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('sass').oneOf('vue-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, sassOptions: { indentedSyntax: true } } } ] }, /* config.module.rule('sass').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('sass').oneOf('vue').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('vue').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('sass').oneOf('vue').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('sass').oneOf('vue').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, sassOptions: { indentedSyntax: true } } } ] }, /* config.module.rule('sass').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('normal-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('sass').oneOf('normal-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('sass').oneOf('normal-modules').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, sassOptions: { indentedSyntax: true } } } ] }, /* config.module.rule('sass').oneOf('normal') */ { use: [ /* config.module.rule('sass').oneOf('normal').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('sass').oneOf('normal').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('sass').oneOf('normal').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('sass').oneOf('normal').use('sass-loader') */ { loader: 'sass-loader', options: { sourceMap: false, sassOptions: { indentedSyntax: true } } } ] } ] }, /* config.module.rule('less') */ { test: /\.less$/, oneOf: [ /* config.module.rule('less').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('less').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('vue-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('less').oneOf('vue-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('less').oneOf('vue-modules').use('less-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\less-loader\\dist\\cjs.js', options: { sourceMap: false } } ] }, /* config.module.rule('less').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('less').oneOf('vue').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('vue').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('less').oneOf('vue').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('less').oneOf('vue').use('less-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\less-loader\\dist\\cjs.js', options: { sourceMap: false } } ] }, /* config.module.rule('less').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('less').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('normal-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('less').oneOf('normal-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('less').oneOf('normal-modules').use('less-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\less-loader\\dist\\cjs.js', options: { sourceMap: false } } ] }, /* config.module.rule('less').oneOf('normal') */ { use: [ /* config.module.rule('less').oneOf('normal').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('less').oneOf('normal').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('less').oneOf('normal').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('less').oneOf('normal').use('less-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\less-loader\\dist\\cjs.js', options: { sourceMap: false } } ] } ] }, /* config.module.rule('stylus') */ { test: /\.styl(us)?$/, oneOf: [ /* config.module.rule('stylus').oneOf('vue-modules') */ { resourceQuery: /module/, use: [ /* config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('vue-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('stylus').oneOf('vue-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('stylus').oneOf('vue-modules').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] }, /* config.module.rule('stylus').oneOf('vue') */ { resourceQuery: /\?vue/, use: [ /* config.module.rule('stylus').oneOf('vue').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('vue').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('stylus').oneOf('vue').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('stylus').oneOf('vue').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] }, /* config.module.rule('stylus').oneOf('normal-modules') */ { test: /\.module\.\w+$/, use: [ /* config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('normal-modules').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2, modules: { localIdentName: '[name]_[local]_[hash:base64:5]' } } }, /* config.module.rule('stylus').oneOf('normal-modules').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('stylus').oneOf('normal-modules').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] }, /* config.module.rule('stylus').oneOf('normal') */ { use: [ /* config.module.rule('stylus').oneOf('normal').use('vue-style-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\vue-style-loader\\index.js', options: { sourceMap: false, shadowMode: false } }, /* config.module.rule('stylus').oneOf('normal').use('css-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\css-loader\\dist\\cjs.js', options: { sourceMap: false, importLoaders: 2 } }, /* config.module.rule('stylus').oneOf('normal').use('postcss-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\postcss-loader\\src\\index.js', options: { sourceMap: false, plugins: [ function () { /* omitted long function */ } ] } }, /* config.module.rule('stylus').oneOf('normal').use('stylus-loader') */ { loader: 'stylus-loader', options: { sourceMap: false, preferPathResolver: 'webpack' } } ] } ] }, /* config.module.rule('js') */ { test: /\.m?jsx?$/, exclude: [ function () { /* omitted long function */ } ], use: [ /* config.module.rule('js').use('cache-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\cache-loader\\dist\\cjs.js', options: { cacheDirectory: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\.cache\\babel-loader', cacheIdentifier: 'da55ec58' } }, /* config.module.rule('js').use('babel-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\babel-loader\\lib\\index.js' } ] }, /* config.module.rule('eslint') */ { enforce: 'pre', test: /\.(vue|(j|t)sx?)$/, exclude: [ /node_modules/, 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\@vue\\cli-service\\lib' ], use: [ /* config.module.rule('eslint').use('eslint-loader') */ { loader: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\eslint-loader\\index.js', options: { extensions: [ '.js', '.jsx', '.vue' ], cache: true, cacheIdentifier: '5893a0a9', emitWarning: false, emitError: false, eslintPath: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\node_modules\\eslint', formatter: undefined } } ] } ] }, optimization: { splitChunks: { cacheGroups: { vendors: { name: 'chunk-vendors', test: /[\\/]node_modules[\\/]/, priority: -10, chunks: 'initial' }, common: { name: 'chunk-common', minChunks: 2, priority: -20, chunks: 'initial', reuseExistingChunk: true } } }, minimizer: [ /* config.optimization.minimizer('terser') */ new TerserPlugin( { terserOptions: { compress: { arrows: false, collapse_vars: false, comparisons: false, computed_props: false, hoist_funs: false, hoist_props: false, hoist_vars: false, inline: false, loops: false, negate_iife: false, properties: false, reduce_funcs: false, reduce_vars: false, switches: false, toplevel: false, typeofs: false, booleans: true, if_return: true, sequences: true, unused: true, conditionals: true, dead_code: true, evaluate: true }, mangle: { safari10: true } }, sourceMap: true, cache: true, parallel: true, extractComments: false } ) ] }, plugins: [ /* config.plugin('vue-loader') */ new VueLoaderPlugin(), /* config.plugin('define') */ new DefinePlugin( { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ), /* config.plugin('case-sensitive-paths') */ new CaseSensitivePathsPlugin(), /* config.plugin('friendly-errors') */ new FriendlyErrorsWebpackPlugin( { additionalTransformers: [ function () { /* omitted long function */ } ], additionalFormatters: [ function () { /* omitted long function */ } ] } ), /* config.plugin('html') */ new HtmlWebpackPlugin( { title: 'my-site1', templateParameters: function () { /* omitted long function */ }, template: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\public\\index.html' } ), /* config.plugin('preload') */ new PreloadPlugin( { rel: 'preload', include: 'initial', fileBlacklist: [ /\.map$/, /hot-update\.js$/ ] } ), /* config.plugin('prefetch') */ new PreloadPlugin( { rel: 'prefetch', include: 'asyncChunks' } ), /* config.plugin('copy') */ new CopyPlugin( [ { from: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\public', to: 'F:\\VueExts\\front-study\\搭建工程\\my-site\\dist', toType: 'dir', ignore: [ '.DS_Store', { glob: 'index.html', matchBase: false } ] } ] ) ], entry: { app: [ './src/main.js' ] } }
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決
這篇文章主要給大家介紹了關于el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細,需要的朋友可以參考下2024-01-01vue啟動報錯‘vue-cli-service serve‘問題及解決
這篇文章主要介紹了vue啟動報錯‘vue-cli-service serve‘問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10一文教會你搭建vite項目并配置路由和element-plus
由于項目搭建過程實在繁瑣,容易遺忘,每次新建項目還得百度一下怎么搭建,所以寫下本文提醒自己,下面這篇文章主要給大家介紹了關于搭建vite項目并配置路由和element-plus的相關資料,需要的朋友可以參考下2022-07-07