一、package.json文件

（1）作用：

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

（2）创建：

package.json 文件创建有两种方式，手动创建或者自动创建。

  • 手动创建
    直接在项目根目录新建一个 package.json 文件，然后输入相关的内容。
  • 自动创建
    也是在项目根目录下执行 npm init，然后根据提示一步步输入相应的内容完成后即可自动创建。

（3）示例：

{
  "name": "sop-vue",  //项目名
  "version": "0.1.0",
  "author": "zhangsan <zhangsan@163.com>",
  "description": "sop-vue",
  "keywords":["node.js","javascript"],
  "private": true,
  "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
  "contributors":[{"name":"李四","email":"lisi@example.com"}],
  "repository": {
                                         "type": "git",
                                         "url": "https://path/to/url"
                    },
  "homepage": "http://github.com/style.css",
  "license":"MIT",
  "dependencies": {
  "bd-font-icons": "^1.1.3",
  "core-js": "^3.6.4",
  "echarts": "^4.7.0",
  "element-ui": "^2.13.1",
  "v-charts": "^1.19.0",
  "vue": "^2.6.11",
  "vue-router": "^3.1.6",
  "vuex": "^3.1.3"
},
  "devDependencies": {
  "@vue/cli-plugin-babel": "^4.3.0",
  "@vue/cli-plugin-eslint": "^4.3.0",
  "@vue/cli-plugin-router": "^4.3.0",
  "@vue/cli-plugin-unit-mocha": "^4.3.0",
  "@vue/cli-plugin-vuex": "^4.3.0",
  "@vue/cli-service": "^4.3.0",
  "@vue/test-utils": "1.0.0-beta.31",
  "babel-core": "^6.26.3",
  "babel-eslint": "^10.1.0",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "chai": "^4.1.2",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "sass": "^1.26.3",
  "sass-loader": "^8.0.2",
  "vue-template-compiler": "^2.6.11"
}
  "scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
  },
  "bin": {
  "webpack": "./bin/webpack.js"
  },
  "main": "lib/webpack.js",
  "module": "es/index.js",
  "eslintConfig": {
    "extends": "vue-app"
  },
  "engines" : {
    "node" : ">=0.10.3 <0.12"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "style": [
  "./node_modules/tipso/src/tipso.css"
],
  "files": [
    "lib/",
    "bin/",
    "buildin/",
    "declarations/",
    "hot/",
    "web_modules/",
    "schemas/",
    "SECURITY.md"
  ]
}

（4）package.json 文件配置说明：

选项 说明 必填
name 项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母 是
version 项目版本 是
author 项目开发者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则 否
description 项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包 否
keywords 项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包 否
private 是否私有，设置为 true 时，npm 拒绝发布 否
license 软件授权条款，让用户知道他们的使用权利和限制 否
bugs bug 提交地址 否
contributors 项目贡献者 否
repository 项目仓库地址 否
homepage 项目包的官网 URL 否
dependencies 生产环境下，项目运行所需依赖 否
devDependencies 开发环境下，项目所需依赖 否
scripts 执行 npm 脚本命令简写，比如 “serve”: “vue-cli-service serve”, 执行 npm run serve 就是运行 “npm vue-cli-service serve” 否
bin 内部命令对应的可执行文件的路径 否
main 项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js 文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件 否
module 是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循 CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段 否
eslintConfig EsLint 检查文件配置，自动读取验证 否
engines 项目运行的平台 否
browserslist 供浏览器使用的版本列表 否
style 供浏览器使用时，样式文件所在的位置；样式文件打包工具parcelify，通过它知道样式文件的打包位置 否
files 被项目包含的文件名数组 否

这个文件保存着项目的时候配置的项目基本信息，它是个标准的json格式文件，编写时要注意格式，重点要关注一下scripts里面的内容，这里面包含了项目的一些指令简写，在这里可以配置启动不同环境的项目的指令。

 二、vue.config.js文件

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

2.1  跨域之proxyTable代理配置

(1) 为何要使用proxyTable

在VUE的这种项目里，一般前端用webpack进行开发与打包；

前端在开发的时候，要调用后端的接口。但开发与生产调用的后端地址不同：

  • 开发状态下，前端代码调用后端的代码，一是存在调用地址的一不致；二是在调用服务端的ajax时，会有跨域的问题需要解决；
  • 生产状态下，就没有什么问题了，一堆打好包的js,css,html放在服务端工程启动的服务里而已；

(2) 如何使用proxyTable

首先要在项目目录中找到根目录下config文件夹下的index.js文件；

由于我们是在开发环境下使用，自然而然是要配置在dev里面（devServer）：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: { //跨域配置
    '/api': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/'   //重写接口名。 
      // 重写前：http://www.abc.com/api/xxx  重写后：http://www.abc.com/xxx
      }
    },
  cssSourceMap: false
}

上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下； 

  • '/api': {...}：就是告诉node, 我接口只要是’/api’开头的才用代理，所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxx.xx.com/api/xx/xx；
  • pathRewrite的作用：因为正确的接口路径是没有/api的，所以需要用'^/api': '/'，表示请求接口时去掉api。
     

2.2  vue.config.js基础配置

（1）vue.config.js基础配置代码

module.exports = {
    publicPath: "./", // 公共路径 默认为"/"，建议使用"./"相对路径
    devServer: {   // 本地服务器配置(npm run serve)
      port: 8080, // 端口
      host: "localhost", // 域名
      https: false, // 是否开启https
      open: true	// 是否在开启服务器后自动打开浏览器访问该服务器

      // 访问 ： http://localhost:8080/api/info
      // 代理到 http://localhost:8081/api/info
      // 真正的接口地址：http://localhost:8081/new/api/info
        proxy: {
            '^/api': {
              target: 'http://localhost:8081', //代理地址，这里设置的地址会代替axios中设置的baseURL。将/api前的域名代理为http://localhost:8081
              changeOrigin: true, //是否跨域
              pathRewrite: {'^/api' : '/'} // 重写/api
            },
            '^/foo': {
              target: 'http://localhost:8081'
            }
          }
    },
    lintOnSave: false,  // 取消lint语法检测，此处可不配置
    outputDir:"dist", // build打包输出目录
    assetsDir:"assets", // 静态文件输出目录，基于dist
    indexPath: "index.html",  // 输出html文件名
    productionSourceMap: false, // 取消.map文件的打包，加快打包速度
    configureWebpack: (config) => {
      // process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
      if (process.env.NODE_ENV !== 'production') return;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;	//生产环境去掉console.log
      return {  // 此处配置webpack.config.js的相关配置
        plugins: [],
        performance: {}
      };
    }
};

（2）每一个配置项的具体效果及意义

1.publicPath——公共路径配置项，默认为"/"，此配置项是影响打包生成文件的引入资源公共路径的

publicPath: "/project_2",

先看一下配置之前的打包文件
打包前
再看一下按配置后的打包文件
在这里插入图片描述
可以看到所有引入文件的地址前都被做了处理

2.devServer——本地服务器配置

devServer: {   // 本地服务器配置(npm run serve)
  port: 8080, // 端口
  host: "localhost", // 域名
  https: false, // 是否开启https
  open: true	// 是否在开启服务器后自动打开浏览器访问该服务器
},

这个配置项所影响的只有本地服务器，也就是用npm run serve打开的webpack服务器的配置项，这里强调一下open:true这个配置项是在我们使用npm run serve部署本地服务器后自动打开浏览器并访问该服务器，这里默认是false，所以配置此项后是可以节省我们打开浏览器的操作的。

3.lintOnSave——lint语法检测

lintOnSave: false

这里配置为true时打包后会严格进行代码lint规范检测，这里通常配置为false，对代码规范有很强的要求的项目可以开启，开启后每次打包后或在webpack服务器的控制台上都会把你代码不规范的地方balabalabala的列出来一片黄色的字，不懂的朋友可以查一下lint规范，这里举个例子，比如你的代码是这样写的：

if(this.init){ 
	var a=1; 
}else{ 
	var a=2; 
}

但link就会认为这样语法不规范，它就会在控制台用黄色的字告诉你不能把同一个变量var两次，所以你就要改成这样：

var a;
if(this.init){
	a=1;
else{
	a=2;
}

4.outputDir——build打包输出目录

outputDir:"dist",

在这里插入图片描述
就是打包的目录名，默认为dist

5.assetsDir——静态文件输出目录，基于dist

assetsDir:"assets",

可以看到我们开发目录src下的所有静态资源文件在打包后全部都集中在assets文件夹中了，这里补充一下，图片中assets目录下面的static目录是开发目录public目录下的静态资源文件，public目录下的文件打包时文件名不会重新生成哈希值。

在这里插入图片描述

6.indexPath——打包生成的html文件名

indexPath: "index.html",

在这里插入图片描述 7.productionSourceMap——取消.map文件的打包

productionSourceMap: false,

建议配置此项，.map文件没有什么作用，这里配置为false，可以加快打包速度

8.configureWebpack: (config) => { return {…} }——在…中配置webpack配置项，相当于webpack.config.js

configureWebpack: (config) => {
  if (process.env.NODE_ENV !== 'production') return;	// 加快开发环境打包速度
  config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;	//生产环境去掉console.log
  return {  // 此处配置webpack.config.js的相关配置
    plugins: [],
    performance: {}
  };
}

在vue-cli项目中webpack.config.js文件是无效的，但是可以在vue.config.js中的configureWebpack中进行webpack配置，下面展示一下我配置过的一个项目

在这里插入图片描述 这里就是加了一个webpack插件，大家可以根据自己项目需求来配置webpack

9. Css相关配置

css.modules

Type: boolean

Default: false

默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。

css.extract

Type: boolean | Object

Default: 生产环境下是 true，开发环境下是 false

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

css.sourceMap

Type: boolean

Default: false

是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。

css.loaderOptions

Type: Object

Default: {}

向 CSS 相关的 loader 传递选项。

支持的 loader 有：

css-loader

postcss-loader

sass-loader

less-loader

stylus-loader

参考：https://blog.csdn.net/qq_40279656/article/details/107805720

vue.config.js 配置 - 简书 (jianshu.com)

Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue