vue项目启动与打包简要总结
一、前期准备
1.首先，需要安装nodejs，版本需要与其它同事的保持一致，否则可能出现打包报错的情况；
安装msi格式的nodejs，就可以不用手动配置环境变量。
2.如果有必要，修改npm下载源为公司内网源（如果允许访问外网，可以找cnpm使用淘宝源的方法）
npm config set registry http://www.xxx.com/groupnpm config get registry
3.从git上下载完项目后，需要在项目文件夹中打开cmd，使用npm install命令，下载相关依赖包node_modules。
二、确认package.json文件
1.确认项目中的package.json文件，其中有个scripts字段，不同项目可能配置的不一样。
(1)可能是这样配置的：
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},
这样的，是默认配置，可以使用npm run serve启动项目，使用npm run build打包项目。
(2)可能是这样配置的：
"scripts": {"compile": "cross-env SERVER_ENV=test node build/dev-server.js","build": "cross-env SERVER_ENV=test node build/build.js","lint": "eslint --ext .js,.vue src","qs": "node ./build/inquirer && npm run compile"},
这样的，就是自定义了启动命令与打包命令，使用npm run compile启动项目，使用npm run build打包项目，需要注意：
其中自定义了一个全局变量SERVER_ENV，前端代码中会读取这个值，当前是test，表示是测试环境；如果打生产环境的包，就需要改为prod。（这个是本人的前端项目的自定义配置，只是个例子，不同项目配置不一样）
(3)可能是这样配置的：
"scripts": {"test": "node ./build-test","prod": "node ./build-prod"},
这样的，也是自定义了命令，在项目根路径下，还有build-test.js与build-prod.js这2个文件；
当执行npm run test时，执行的就是build-test.js，会打测试包到dist文件夹里；
当执行npm run prod时，执行的就是build-prod.js，会打生产包到dist文件夹里。
注意：build-test.js与build-prod.js是自己创建的js文件，其中包含具体的打包命令逻辑；npm run test与npm test命令相同，都是执行package.json的scripts为test的逻辑。（npm test是npm run test的简写；npm run xxx 格式的命令就是执行scripts里的命令）
三、本地启动前端项目
以默认的package.json文件为例，启动命令就是npm run serve，启动后，cmd窗口会显示出启动的端口号，就可以打开浏览器访问了，需要注意访问的路径。
以本人的前端项目mobile-project为例：
1.可能会有一个E:\mobile-project\config\index.js文件，其中配置了部分访问路径，web-test，以及端口，10001。
module.exports = {build: {env: prodEnv,assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath,productionSourceMap: false,},dev: {env: devEnv,port: 10001,assetsSubDirectory: 'static',assetsPublicPath:process.env.SERVER_ENV === 'test'? '/web-test/': '/web/',proxyTable: {api: {filter: '/basic-api/**',changeOrigin: true,target,onProxyReq(proxyReq) {proxyReq.setHeader('Cookie',`SESSION=6b1c342d-5113-41cf-b566-332f6d68fa52`)},},},cssSourceMap: false,},}
2.假设有一个文件夹：
E:\mobile-project\src\modules\user\user-config
其中有3个文件：
app.vuemain.jstmpl.html
3.此时，访问以下url，就是访问到了user-config文件夹里的页面：
http://localhost:10001/web-test/user/user-config.html?user=abc&sign=78d583f0176cd6b05ed92f225a88b
注意：
(1)10001是本人前端项目启动后的端口
(2)web-test是配置的前缀路径
(3)/user/user-config.html访问的就是user/user-config文件夹下的文件，先加载main.js文件，然后加载app.vue文件（这个就是vue框架实现的）
(4)user与sign参数，用get形式传递，在app.vue代码中是可以获取到的；app.vue获取参数样例如下：
import param from '@utils/url-param'const user = param('user')const sign = param('sign')
这样，app.vue后续代码就可以用传入参数的值了。
四、前端项目打包
以默认的package.json文件为例，打包命令就是npm run build，执行完毕后，一般都会把打好的前端项目生成到dist文件夹中。
前端项目发版的话，一般就是把dist文件夹及其中的内容、直接放到服务器上指定位置即可。（然后配合nginx就可以访问到了）
分手后的思念是犯贱
以你之姓@
刺骨的言语ヽ痛彻心扉
系统管理员
柔情只为你懂
还没有评论，来说两句吧...