vue項目啟動命令個人學習記錄

更新時間：2023年02月07日 08:44:17 作者：追逐夢想永不停

最近想要學習vue,正好看到資料,如何通過命令創(chuàng)建vue項目的方法,就留個筆記,下面這篇文章主要給大家介紹了關于vue項目啟動命令的相關資料,需要的朋友可以參考下

一、前言

最近在看vue框架，發(fā)現(xiàn)啟動命令邏輯比較復雜，在這里總結(jié)一波。

注意，下面的總結(jié)以本人的項目為例，不同項目可能細節(jié)不同，僅供參考。

二、啟動命令詳解

1.項目啟動前，需要先裝好nodejs，并用npm install安裝好依賴。

2.本人的項目中，vue啟動命令為：

npm run compile

其中，npm run xxx會執(zhí)行package.json中配置的命令，例如package.json中，有：

  "scripts": {
    "compile": "cross-env SERVER_ENV=test node build/dev-server.js",
  },

所以實際執(zhí)行的會是cross-env SERVER_ENV=test node build/dev-server.js命令。

3.cross-env命令，作用是實現(xiàn)跨平臺配置環(huán)境變量，SERVER_ENV=test就是自己配置的一個環(huán)境變量，后續(xù)js等文件會用到。

（就是windows和linux都可以用 cross-env key=value 來配置環(huán)境變量的意思）

4.node命令，可以執(zhí)行js文件，所以node build/dev-server.js實際執(zhí)行的就是項目根目錄/build/dev-server.js文件。

（因為是在項目根目錄執(zhí)行的npm run compile命令，所以build/dev-server.js就是從項目根目錄開始的；其中dev-server.js是自己編寫的一個js文件）

5.dev-server.js文件中，有：

//這個會打印test，上面配置的環(huán)境變量
console.log("env1",process.env.SERVER_ENV)
//這個會打印prod，因為沒有配置ENV1
console.log("env2",`"${process.env.SERVER_ENV1 || 'prod'}"`)
//這個會打印test，上面配置的環(huán)境變量
console.log("env3",`"${process.env.SERVER_ENV || 'prod'}"`)

const config = require('../config')
//這個打印內(nèi)容
console.log("config",config)

這個的意思是，聲明一個變量config，內(nèi)容是當前js文件的、上一個目錄中的、config文件夾中的index.js文件。(自己編寫的index.js文件)
注意，只讀取文件夾下的index.js文件，不讀取其它js文件。

6.config/index.js文件中，有：

//這個是讀取node_modules的path依賴，解析路徑用的（類似jar包）
const path = require('path')

//這個是讀取同級目錄下的test.js文件
const testEnv = require('./test')

module.exports = {
  test: {
    env: testEnv,
    port: 10001,
    assetsSubDirectory: 'static',
    assetsPublicPath: process.env.SERVER_ENV === 'test' ? '/sub-path-test/' : '/sub-path/',
    proxyTable: {
      api: {
        filter: '/sub-path-test/**',
        changeOrigin: true,
        target,
        onProxyReq(proxyReq) {
          proxyReq.setHeader(
            'Cookie', `SESSION=6b7c231d-1133-40cf-c566-332f6dtxfa72`
          )
        },
      },
    },
  },
}

這個文件中，因為有module.exports，所以第5步中可以require到。

這個文件中，有個變量testEnv，配置到了module.exports的json串中，它的值下面會寫。

7.config/test.js文件中，有：

//這個也是node_modules里的依賴方法，用來合并成json用
const merge = require('webpack-merge');

//這個讀取的是同級目錄下的prod.js文件
const prodEnv = require('./prod');

//這個把json合并了下，然后exports了
module.exports = merge(prodEnv, {
  TEST_ENV: '"test_env"',
});

8.config/prod.js文件中，有：

module.exports = {
  PROD_ENV: '"prod_env"',
};

9.現(xiàn)在，回到dev-server.js文件(第5步)，其中的config變量的內(nèi)容為：

config {
  test: {
    env: { TEST_ENV: '"test_env"', PROD_ENV: '"prod_env"' },
    port: 10001,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/sub-path-test/',
    proxyTable: { api: [Object] }
  }
}

10.dev-server.js文件中，主要有以下代碼：

//node_modules里的依賴，框架方法
const express = require('express')
//執(zhí)行這個方法，獲得返回值
const app = express()

//node_modules里的依賴，解析路徑用
const path = require('path')
//從config對象（json）里獲取到子路徑相關
//posix是一種平臺兼容寫法，與join相同，也是把路徑拼接起來
//staticPath="/sub-path-test/static"
const staticPath = path.posix.join(
  config.test.assetsPublicPath,
  config.test.assetsSubDirectory
)
//配置虛擬子路徑、以及靜態(tài)資源目錄
//意思是，訪問/sub-path-test/static時，訪問的類似是當前目錄(一般是dist目錄)下的static文件夾中的內(nèi)容
//例如，http://localhost:10001/sub-path-test/static/a.png，訪問的就是static文件夾里的a.png
app.use(staticPath, express.static('./static'))

//啟動項目，設置啟動后的端口，10001
const port = config.test.port
module.exports = app.listen(port, err => {
  if (err) {
    console.log(err)
  }
})

這段代碼的意思是，使用了express框架，設置了一個虛擬訪問路徑與靜態(tài)資源目錄，設置了一個項目啟動端口。

例如，訪問http://localhost:10001/sub-path-test/static/a.png，訪問的類似是static文件夾里的a.png

注意，項目打包后，在dist文件夾中、會生成a.png；

不過，只啟動項目的話，并不會打包、dist文件夾是空的，不過也能訪問到，是框架實現(xiàn)的。

11.dev-server.js文件中，還用到了：

//node_modules依賴方法
const webpack = require('webpack')
//自己配置的一個js文件
const webpackConfig = require('./webpack.dev.conf')
//調(diào)用了下webpack方法
const compiler = webpack(webpackConfig)
//獲得了個變量devMiddleware
const devMiddleware = require('webpack-dev-middleware')(compiler, {
  //總之，這個的值也是 config.test.assetsPublicPath，就是"/sub-path-test/"
  publicPath: webpackConfig.output.publicPath,
  noInfo: false,
  quiet: false,
  stats: {
    colors: true,
  },
})

//給app設置了下
app.use(devMiddleware)

這段還沒有全看明白，總之就是設置了個publicPath，也是/sub-path-test，感覺類似express.static那里。

實現(xiàn)的效果是，當訪問http://localhost:10001/sub-path-test/user/user-detail.html時，訪問的實際上類似是.../dist/user/user-detail.html。

(是/user/user-detail/app.vue等文件最后生成的user.html文件，如果打包的話就能看到了。)

注意，只啟動項目的話，并不會打包、dist文件夾是空的，不過也能訪問到，是框架實現(xiàn)的。

12.可以根據(jù)環(huán)境變量不同、配置不同的虛擬訪問路徑（例如測試用sub-path-test、生產(chǎn)用sub-path）；

然后就可以在nginx中、根據(jù)某些變量不同、訪問不同的路徑、就是訪問不同的環(huán)境（例如某些人的賬號訪問測試、某些人的賬號訪問準生產(chǎn)等，用來自測）；

然后可以在公共js方法中，做一些判斷，如果是測試url、或者如果環(huán)境變量是test、就在發(fā)送請求方法處增加setHeader('Cookie','asd-adf-ad-123-adf')等方法，用來自測。