vue项目组package.json文件配置内容

本文介绍了Vue项目的package.json文件内容,包括开发脚本、依赖库和开发依赖。关键组件如webpack、Vue、Element UI、axios等被详细列出。此外,还提到了浏览器兼容性和Node/NPM版本要求。

{

"name": "BSS",

"version": "1.0.0",

"description": "BSS",

"author": "China-Telecom-BSS",

"private": true,

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"

},

"dependencies": {

"axios": "^0.17.1",

"babel-polyfill": "^6.26.0",

"echarts": "^4.1.0",

"element-ui": "^2.0.7",

"iview": "^2.14.3",

"js-cookie": "^2.2.0",

"lodash": "^4.17.5",

"moment": "^2.22.0",

"swiper": "^4.3.3",

"vue": "^2.5.2",

"vue-router": "^3.0.1",

"vuex": "^3.0.1"

},

"devDependencies": {

"node-sass": "^4.7.2",

"sass-loader": "^6.0.7",

"autoprefixer": "^7.1.2",

"axios": "^0.17.1",

"babel-core": "^6.22.1",

"babel-loader": "^7.1.1",

"babel-plugin-transform-runtime": "^6.22.0",

"babel-preset-env": "^1.3.2",

"babel-preset-stage-2": "^6.22.0",

"chalk": "^2.0.1",

"copy-webpack-plugin": "^4.0.1",

"css-loader": "^0.28.0",

"eventsource-polyfill": "^0.9.6",

"extract-text-webpack-plugin": "^3.0.0",

"file-loader": "^1.1.4",

"friendly-errors-webpack-plugin": "^1.6.1",

"html-webpack-plugin": "^2.30.1",

"mockjs": "^1.0.1-beta3",

"node-notifier": "^5.1.2",

"optimize-css-assets-webpack-plugin": "^3.2.0",

"ora": "^1.2.0",

"portfinder": "^1.0.13",

"postcss-import": "^11.0.0",

"postcss-loader": "^2.0.8",

"qs": "^6.5.1",

"rimraf": "^2.6.0",

"semver": "^5.3.0",

"shelljs": "^0.7.6",

"uglifyjs-webpack-plugin": "^1.1.1",

"url-loader": "^0.5.8",

"vue-loader": "^13.3.0",

"vue-style-loader": "^3.0.1",

"vue-template-compiler": "^2.5.2",

"webpack": "^3.6.0",

"webpack-bundle-analyzer": "^2.9.0",

"webpack-dev-server": "^2.9.1",

"webpack-merge": "^4.1.0"

},

"engines": {

"node": ">= 4.0.0",

"npm": ">= 3.0.0"

},

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"

]

}

### Vue 项目的打包配置Vue 项目中,`package.json` 文件不仅用于管理依赖包,还承载着构建过程的关键配置。对于构建流程而言,主要通过 `scripts` 字段定义不同环境下执行的任务。 #### 使用 Webpack Inspect 命令审查配置 为了更好地理解实际使用的 Webpack 配置,在开发过程中可以通过 `@vue/cli-service` 提供的 `inspect` 功能来获取完整的 Webpack 配置详情[^1]: ```bash vue inspect # 打印当前Webpack配置至控制台 vue inspect > output.js # 导出Webpack配置文件 ``` #### 构建环境变量设置 针对不同的部署阶段(如开发、测试或生产),通常会在 `.env`, `.env.development`, 和 `.env.production` 等环境中设定特定的环境变量。这些变量会被自动加载并可通过 `process.env.VARIABLE_NAME` 的形式访问[^2]。 #### 自定义构建工具链选项 当需要调整默认行为或者集成额外的预处理器时,则可以在根目录下创建名为 `vue.config.js` 的文件来进行全局性的修改。此文件允许开发者覆盖诸如公共路径(publicPath),输出目录(outputDir)等重要参数[^3]: ```javascript module.exports = { publicPath: './', // 应用公共基础路径 outputDir: 'dist', // 生产环境下的输出目录名称 }; ``` #### 合并与扩展配置 如果希望进一步细化某些方面的配置,比如区分开发与生产的差异,可以利用像 `webpack-merge` 这样的库将多个配置片段组合起来形成最终版本。例如,在 `dev.env.js` 中可以看到如何基于现有配置添加新的属性[^4]: ```javascript const merge = require('webpack-merge'); const prodEnv = require('./prod.env'); module.exports = merge(prodEnv, { NODE_ENV: '"development"', // 设置为开发模式 }); ``` 以上方法共同作用于整个构建管道之中,确保了灵活性的同时也保持了一定程度上的简洁性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值