vue项目启动命令个人学习记录

npm run compile 

  "scripts": { "compile": "cross-env SERVER_ENV=test node build/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) 

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

//这个也是node_modules里的依赖方法，用来合并成json用 const merge = require('webpack-merge'); //这个读取的是同级目录下的prod.js文件 const prodEnv = require('./prod'); //这个把json合并了下，然后exports了 module.exports = merge(prodEnv, { TEST_ENV: '"test_env"', }); 

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

config { test: { env: { TEST_ENV: '"test_env"', PROD_ENV: '"prod_env"' }, port: 10001, assetsSubDirectory: 'static', assetsPublicPath: '/sub-path-test/', proxyTable: { api: [Object] } } } 

//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-600，访问的就是static文件夹里的a.png-600 app.use(staticPath, express.static('./static')) //启动项目，设置启动后的端口，10001 const port = config.test.port module.exports = app.listen(port, err => { if (err) { console.log(err) } }) 

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