vue项目启动命令个人笔记

素颜马尾好姑娘i 2024-03-31 17:56 59阅读 0赞

## 一、前言 ##

最近在看vue框架，发现启动命令逻辑比较复杂，在这里总结一波。

**注意，下面的总结以本人的项目为例，不同项目可能细节不同，仅供参考。**

## 二、启动命令详解 ##

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 run compile命令，所以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`到。  
这个文件中，有个变量`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.现在，回到`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框架，设置了一个虚拟访问路径与静态资源目录，设置了一个项目启动端口。  
例如，访问`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、生产用sub-path）；  
然后就可以在nginx中、根据某些变量不同、访问不同的路径、就是访问不同的环境（例如某些人的账号访问测试、某些人的账号访问准生产等，用来自测）；  
然后可以在公共js方法中，做一些判断，如果是测试url、或者如果环境变量是test、就在发送请求方法处增加`setHeader('Cookie','asd-adf-ad-123-adf')`等方法，用来自测。

## 三、总结 ##

1.上方的启动命令与相关文件，是根据本人的项目总结的，仅供参考，不同项目细节可能不同。

2.项目启动命令可以自己配置，过程如上，需要熟悉node\_modules中的一些依赖方法。（本人新学，好多都不熟悉，无从入手，只能先看，总结一波自己理解的）

3.可以配置本地vue项目启动时、端口号与访问前缀路径；  
`需要注意的是`，项目打包部署到服务器上后又会有所区别，服务器上主要是在`nginx`中配置访问端口与前缀路径的，而不是在vue项目中。