I.はじめに

最近vueフレームワークを調べていたところ、起動コマンドのロジックがより複雑であることがわかったので、ここにまとめておきます。

以下の概要は、私自身のプロジェクトを例として取り上げています。プロジェクトが異なれば、詳細は異なる可能性があります。これらは参照のみを目的としています。

2. 起動コマンドの詳細

1. プロジェクトを開始する前に、プロジェクトを最初にインストールしnodejs、npm install依存関係をインストールする必要があります。

2. 私のプロジェクトでは、vue 起動コマンドは次のとおりです。

npm run compile

その中で、に設定されたコマンドがnpm run xxx実行されます。たとえば、package.json には次のようなものがあります。package.json

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

したがって、実際の実行はcross-env SERVER_ENV=test node build/dev-server.jsコマンドになります。

3.cross-envこのコマンドは、環境変数のクロスプラットフォーム設定を実現するために使用されます。SERVER_ENV=test環境変数は、自分で設定した環境変数であり、後続の js やその他のファイルで使用されます。
(Windows と Linux の両方を使用してcross-env key=value環境変数を設定できることを意味します)

4.nodeコマンドは js ファイルを実行できるため、node build/dev-server.js実際に実行されるのは项目根目录/build/dev-server.jsファイルです。
(npm runcompileコマンドはプロジェクトのルートディレクトリで実行されるため、build/dev-server.jsはプロジェクトのルートディレクトリから起動します。dev-server.jsは自分で書いたjsファイルです)

5.dev-server.jsファイルには次のものが含まれます。

//这个会打印test，上面配置的环境变量
console.log("env1",process.env.SERVER_ENV)
//这个会打印prod，因为没有配置ENV1
console.log("env2",`"${process.env.SERVER_ENV1 || 'prod'}"`)
//这个会打印test，上面配置的环境变量
console.log("env3",`"${process.env.SERVER_ENV || 'prod'}"`)

const config = require('../config')
//这个打印内容
console.log("config",config)

これは、変数 config が宣言され、その内容が現在の 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。このファイルには、 json文字列で設定された
変数があり、その値が以下に記述されます。testEnvmodule.exports

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.dev-server.jsファイル (ステップ 5) に戻ります。configファイル内の変数の内容は次のとおりです。

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')
//执行这个方法，获得返回值
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
)
//配置虚拟子路径、以及静态资源目录
//意思是，访问/sub-path-test/static时，访问的类似是当前目录(一般是dist目录)下的static文件夹中的内容
//例如，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 フレームワークが使用され、仮想アクセスパスと静的リソースディレクトリが設定され、プロジェクトの起動ポートが設定されることを意味します。
たとえば、 access のアクセスhttp://localhost:10001/sub-path-test/static/a.pngは、 static フォルダー内のアクセスと似ていますa.png
。プロジェクトがパッケージ化されると、dist フォルダーに a.png が生成されますが、
プロジェクトを開始しただけの場合はパッケージ化されないことに注意してください。 dist フォルダーは空ですが、フレームワークによって実装されているため、アクセスすることもできます。

11.dev-server.jsファイル内では以下も使用されます。

//node_modules依赖方法
const webpack = require('webpack')
//自己配置的一个js文件
const webpackConfig = require('./webpack.dev.conf')
//调用了下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。
達成される効果は、アクセスするとhttp://localhost:10001/sub-path-test/user/user-detail.html、アクセスされる内容が実際に類似することです.../dist/user/user-detail.html。(/user/user-detail/app.vue などのファイルの末尾に生成される user.html ファイルであり、パッケージ化されている場合に確認できます。)

プロジェクトを開始しただけの場合、プロジェクトはパッケージ化されず、dist フォルダーは空ですが、フレームワークによって実装されているため、アクセスすることもできることに注意してください。

12. さまざまな環境変数 (テスト用の sub-path-test、運用用のサブパスなど) に従ってさまざまな仮想アクセスパスを構成でき、その後、さまざまな変数に従って nginx のさまざまなパスにアクセスできます。つまり、さまざまな環境変数にアクセスできます
。環境 (一部の人のアカウントアクセステスト、一部の人のアカウントアクセスの準本番環境など、自己テスト用);
その後、パブリック JS メソッドで、それがテスト URL であるか、環境が正しいかどうかを判断できます。変数テストです。送信リクエストのメソッドに他のメソッドを追加するだけでsetHeader('Cookie','asd-adf-ad-123-adf')、自己テストが可能です。

3. まとめ

1. 上記の起動コマンドおよび関連ドキュメントは、私のプロジェクトに基づいてまとめたものであり、参照のみを目的としており、プロジェクトによっては詳細が異なる場合があります。

2. プロジェクトの起動コマンドは自分で設定できます。プロセスは上記のとおりです。node_modules のいくつかの依存メソッドに精通している必要があります。(私は初めて学習し、多くのことをよく知りません。始める方法がありません。最初に読んで、理解した内容を要約することしかできません。)

3. ローカル Vue プロジェクトの開始時に、ポート番号とアクセスプレフィックスパスを設定できます。
需要注意的是プロジェクトは、パッケージ化されてサーバーにデプロイされた後は異なります。nginxアクセスポートとプレフィックスパスは、主にサーバー内で設定されます。 vueプロジェクトの真ん中。

Vue プロジェクト起動コマンドの個人的なメモ

I.はじめに

2. 起動コマンドの詳細

3. まとめ

おすすめ