Vue-cli2+webpack搭建vue项⽬流程以及打包发布流程 ⽬录
无动力清扫器⼀. vue-cli2 + webpack搭建项⽬流程以及打包发布流程
最近升级到vue-cli3，发现vue-cli2搭建项⽬命令不能⽤了，两者搭建开发环境项⽬内容也发⽣了变化。 vue-cli2搭建项⽬环境的命令：vue init webpack vue2-webpack-project
vue-cli2升级到vue-cli3的时候，vue init 命令不能⽤了，如果还想使⽤vue init命令，需要全局添加⼀个@vue/cli-init⼯具包。
yarn global add @vue/cli-init
npm install -g @vue/cli-init
1.1 命令⾏初始化项⽬
vue init webpack vue-webpack
Project name vue-webpack // 项⽬名称
Project description vue-cli2+webpack模版 // 项⽬注释
Author ⼀座岛 // 作者
Vue build standalone
Install vue-router Yes // 加载依赖vue-router Use ESLint to lint your code Yes // 是否添加eslint到你项⽬中，格式化代码，规范代码格式统⼀，检验代码合法性。 Pick an ESLint preset Standard // 采⽤eslint标准
Set up unit tests No // 是否开启单元测试
Setup e2e tests with Nightwatch No // 是否开启端到端测试
Should we run `npm install` for you after the project has been created (recommended) yarn // 选择npm ，yarn 依赖包管理⼯具
1.2 分析项⽬⽬录
-->build⽬录：⽤于存放 webpack 相关配置和脚本。
-->config⽬录：主要存放配置⽂件，⽤于区分开发环境、线上环境的不同。 常⽤到此⽂件夹下 config.js 配置开发环境的 端⼝号、是否开启热加载 或者 设置⽣产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包⽣成静态资源的名称和路径等。
-->index.html：设置项⽬的⼀些meta头信息和提供<div id="app"></div>⽤于挂载 vue 节点。
-->node_modules⽬录：存放项⽬中下载好的依赖⼯具包。
-->package.json⽂件：
存放项⽬名称，版本号，dependencies和devDependencies声明了需要引⽤的依赖包，启动、打包项⽬的命令管理等。
-
->src⽬录：我们开发的页⾯和资源可以放在这⾥。
src下main.js：vue-cli⼯程的⼊⼝⽂件。
90DYW1src下app.vue：使⽤标签<route-view></router-view>渲染整个⼯程的.vue组件
-->static⽬录：存放⼀些静态⽂件。
1.3 运⾏项⽬
第⼀次初始化项⽬，终端对话框中，需要进⼊到项⽬⽬录中，执⾏两条命令yarn install , yarn run dev
没有新依赖包加⼊到项⽬中，直接执⾏yarn run dev就可以了。
1.4 多环境配置打包发布
1. 下载cross-env依赖包：yarn add cross-env --s-dev
2. package.json⽂件中准备不同环境打包命令
1. build:prod：⽣产环境, cross-env命令后⾯NODE_ENV=production，表⽰给v.NODE_ENV=production
2. build:test：测试环境。
3. build:test2：测试环境2，这⾥需要注意NODE_ENV=test，会影响打包的⽂件⼤⼩。
注意点：build⽬录->utils.js，f.js，f.js中使⽤到了v.NODE_ENV===production)判断语句来做配置，NODE_ENV!=production时候会影响打包⽂件⼤⼩。我们打包命令中统⼀添加NODE_ENV=production。
芦荟减肥茶
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/f.js",
"prod": "webpack-dev-server --inline --progress --config build/f.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build:test2": "cross-env env_config=test node build/build.js"
},
3. config⽬录中添加v.js⽂件，并对index.js中build属性编辑。
'use strict'
const path = require('path')
let assetsRoot = solve(__dirname, '../dist')
// 可以根据不同的打包环境，指定包的输出路径。
v.env_config === 'prod'){
assetsRoot = solve(__dirname, '../dist')
}else v.env_config === 'test'){
assetsRoot = solve(__dirname, '../test')
}else {
assetsRoot = solve(__dirname, '../nathing')
}
//
build: {
prodEnv: require('./v'),
不锈钢液压管接头testEnv:require('./v'),
// Template for index.html
index: assetsRoot+'/index.html',
// Paths
assetsRoot: assetsRoot,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// /configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
快速插头// Run the build command with an extra argument to
/
/ View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: v.npm_config_report
}
}
4. build⽬录中修改build.js，f.js⽂件。
build.js⽂件中删除⼀⾏代码：
f.js⽂件中替换⼀⾏代码：
const env = require('../v'）替换成 config.v.env_config+'Env'] 5. 运⾏打包命令
yarn run build:prod
yarn run build:test
6. 发布项⽬
6.1 ⽅案1：
pamam第⼀步：开发⼈员将开发完项⽬上传gitLab上，
第⼆步：构建服务器拉去gitLab上正式环境分⽀，进⾏下载依赖，构建，压缩，构建后的发布包会被传到中转站服务器：⽂件管理服务器集。
第三步：运⾏服务器（可能是多台）会从⽂件服务器中拉去对应版本的相同压缩包，并解压运⾏。
6.2 ⽅案2：⾃动部署平台jenkins，其内部原理同⽅案1。可以⼿动部署，也可以⾃动部署。根据gitLab提交或合并请求。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议