I. Introduction

I was looking at the vue framework recently and found that the logic of the startup command is more complicated, so I will summarize it here.

Note that the following summary takes my own project as an example. Different projects may have different details, which are for reference only.

2. Detailed start command

1. Before the project starts, it needs to be installed first nodejs, and npm installthe dependencies need to be installed.

2. In my project, the vue startup command is:

npm run compile

Among them, the commands configured in npm run xxxwill be executed , for example, in package.json, there are:package.json

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

So the actual execution will be cross-env SERVER_ENV=test node build/dev-server.jsthe command.

3. cross-envThe command is used to realize cross-platform configuration of environment variables, SERVER_ENV=testwhich is an environment variable configured by oneself, which will be used in subsequent js and other files.
(It means that both windows and linux can be used cross-env key=valueto configure environment variables)

4. nodeThe command can execute the js file, so node build/dev-server.jsthe actual execution is 项目根目录/build/dev-server.jsthe file.
(Because the npm run compile command is executed in the root directory of the project, build/dev-server.js starts from the root directory of the project; where dev-server.js is a js file written by myself)

5. dev-server.jsIn the file, there are:

//这个会打印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)

This means that a variable config is declared, and the content is the files in the current js file, in the previous directory, and in the config folder index.js. (The index.js file written by myself)
Note that only the index.js file under the folder is read, and other js files are not read.

6. config/index.jsIn the file, there are:

//这个是读取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`
          )
        },
      },
    },
  },
}

In this file, because it exists module.exports, it can be found in step 5 require.
In this file, there is a variable testEnv, which is configured module.exportsin the json string, and its value will be written below.

7. config/test.jsIn the file, there are:

//这个也是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.jsIn the file, there are:

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

9. Now, back to dev-server.jsthe file (step 5), configthe content of the variable in it is:

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.jsIn the file, there are mainly the following codes:

//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)
  }
})

This code means that the express framework is used, a virtual access path and static resource directory are set, and a project startup port is set.
For example, access http://localhost:10001/sub-path-test/static/a.png, the access is similar to the one in the static folder a.png
. Note that after the project is packaged, a.png will be generated in the dist folder;
however, if you only start the project, it will not be packaged, and the dist folder is empty. But it can also be accessed, which is implemented by the framework.

11. dev-server.jsIn the file, also used:

//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)

I haven't fully understood this paragraph yet, but in short, it is set up publicPath, yes /sub-path-test, it feels similar express.staticthere.
The effect achieved is that when accessed http://localhost:10001/sub-path-test/user/user-detail.html, what is accessed is actually similar .../dist/user/user-detail.html. (It is the user.html file generated at the end of files such as /user/user-detail/app.vue, which can be seen if it is packaged.)

Note that if you only start the project, it will not be packaged, and the dist folder is empty, but it can also be accessed, which is implemented by the framework.

12. You can configure different virtual access paths according to different environment variables (such as sub-path-test for testing, sub-path for production); then you can
access different paths in nginx according to different variables, that is Access to different environments (such as some people's account access test, some people's account access quasi-production, etc., for self-test);
then you can make some judgments in the public js method, if it is a test url, or if the environment variable It is test, just add other methods at the sending request method setHeader('Cookie','asd-adf-ad-123-adf'), for self-test.

3. Summary

1. The startup commands and related documents above are summarized based on my project and are for reference only. The details of different projects may be different.

2. The project startup command can be configured by yourself, the process is as above, you need to be familiar with some dependent methods in node_modules. (I am new to learning, and I am not familiar with many of them. I have no way to start. I can only read it first and summarize what I understand)

3. You can configure the port number and access prefix path when the local vue project starts;
需要注意的是, the project will be different after it is packaged and deployed on the server. nginxThe access port and prefix path are mainly configured in the server, not in the vue project middle.

Vue project startup command personal notes

I. Introduction

2. Detailed start command

3. Summary

Guess you like