一、前言

最近在看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,因为没有配置ENV1console.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.pngapp.use(staticPath, express.static('./static'))//启动项目,设置启动后的端口,10001const port = config.test.portmodule.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)//获得了个变量devMiddlewareconst 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项目中。