一、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软件授权条款，让用户知道他们的使用权利和限制否
bugsbug 提交地址否
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 字段否
eslintConfigEsLint 检查文件配置，自动读取验证否
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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue