先后順序：package.json > webpack.dev.conf.js > config/*.js > config/index.js > index.html > App.vue的export外的js代碼 > main.js > App.vue的export里面的js代碼 > route 目錄下的 index.js > HelloWorld.vue > 組成 index.html 單頁SPA應用首頁

SPA：單頁面web應用，一般整個應用只有一個html頁面，通過前端路由實現無刷新跳轉。

Vue就是SPA應用的典型代表，特別是配合webpack等前端構建工具，加載頁面的時候將JavaScript、CSS統一加載，然后通過監聽url的hash實現內容切換。

優點：

無刷新切換內容，提高用戶體驗。

符合前后端分離的開發思想，通過ajax異步請求數據接口獲取數據，后臺只需要負責數據，不用考慮渲染。前端使用vue等MVVM框架渲染數據非常合適。

減輕服務器壓力，展示邏輯和數據渲染在前端完成，服務器任務更明確，壓力減輕。

后端數據接口可復用，設計JSON格式數據可以在PC、移動端通用。

缺點：

不利于SEO(搜索引擎優化)，應用數據是通過請求接口動態渲染，不利于SEO。

首頁加載慢，SPA下大部分的資源需要在首頁加載，造成首頁白屏等問題。

package.json

在當前項目執行npm run dev的時候，會尋找 package.json 文件, 包含項目的名稱版本、項目依賴等相關信息

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"test": "npm run unit && npm run e2e",

"build": "node build/build.js"

},

webpack.dev.conf.js

build/webpack.dev.conf.js 配置并啟動 webpack-dev-server

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const path = require('path')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

const portfinder = require('portfinder')

const HOST = process.env.HOST

const PORT = process.env.PORT && Number(process.env.PORT)

config/*.js

config 目錄下服務器環境的配置文件。

config/index.js

index.js 文件中包含服務器 host 和 port 以及入口文件的相關配置，默認啟動端口是8080，這里可以進行修改。

host: 'localhost',

port: 8080,

index.html

index.html 的內容很簡單，主要是提供一個 div的ID #app 給 vue 掛載。

main.js

main.js 中， 引入了 vue、App 和 router 模塊， 創建了一個 Vue 對象，并把 App.vue 模板的內容掛載到 index.html 的 id 為 app 的 div 標簽下， 并綁定了一個路由配置。

App.vue

上面 main.js 把 App.vue 模板的內容，放置在了 index.html 的 div 標簽下面。查看 App.vue 的內容我們看到，這個頁面的內容由一個 logo 和一個待放置內容的 router-view，router-view 的內容將由 router 配置決定。

index.js

查看 route 目錄下的 index.js，我們發現這里配置了一個路由， 在訪問路徑 / 的時候， 會把 HelloWorld 模板的內容放置到上面的 router-view中。

HelloWorld.vue

HelloWorld 中主要是一些 Vue 介紹顯示內容。

頁面組成

所以，頁面關系組成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。

總結

以上是生活随笔為你收集整理的vuecli启动的服务器位置,VUE启动流程vue-cli的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。