一                   、前言

最近在看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文件夹中的内容 //例如 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，




























，访问的就是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框架 
  
  
  
  
  
  
  
  
  ，设置了一个虚拟访问路径与静态资源目录 
  
  
  
  
  
  
  
  
  
 ，设置了一个项目启动端口                   。

例如

 


 


 


 


 


 


 


 


 


，访问 
 
 
 
 
 
 
 
 
 ，访问的类似是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项目中 
  
  
  
  
  
  
  
  
  。