配置文件

jsconfig.json

用于webpack配置别名,要让vscode正确提示路径,需在Vscode的中启用js文件语义检查

{
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
      "./src/*"
      ],
      "@assets/*": ["./src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@config/*": ["./src/config/*"],
      "@service/*": ["./src/service/*"],
      "@mixins/*": ["./src/mixins/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["./src/**/*"]
}
  • baseURL 设置文件基础路径
  • paths 为路径设置别名,简化路径,路径相当于baseURL
  • exclude 设置排除需要进行语义检查的文件
  • include 设置包含需要进行语义检查的文件

.prettierrc

配置文档
配置工具
prettier插件的配置文件,.prettierignore也是该插件的配置文件,用于设置不需要配置格式化的目录,默认为

**/.git
**/.svn
**/.hg
**/node_modules
{
  printWidth: 80, // 最大行长
  bracketSpacing: true, // 是否在对象属性添加空格,这里选择是 { foo: bar }
  "semi": false,  // 是否在语句末尾打印分号
  "singleQuote": false // 是否使用单引号
  tabWidth: 2 // 设置tab长度
  quoteProps: "as-needed"  //   设置引号
}
{
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": true,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": true
  }

package.json

官方文档
package.json 管理项目依赖的下载,是项目的清单,是 npm 和 yarn 存储所有已安装软件包的名称和版本的地方

{
  "name": "leaflet-draw",
  "version": "1.0.3",
  "description": "Vector drawing plugin for Leaflet",
  "devDependencies": {
    "eslint": "^3.5.0 <3.6.0",
    "eslint-config-mourner": "^2.0.3",
    "uglifycss": "0.0.25"
  },
  "main": "dist/leaflet.draw.js",
  "style": "dist/leaflet.draw.css",
  "directories": {
    "doc": "docs/",
    "example": "docs/example",
    "lib": "src/"
  },
  "files": [
    "dist/*",
    "docs/*"
  ],
  "scripts": {
    "build": "jake build -f ./Jakefile.js",
    "test": "jake test",
    "docs": "jake docs",
    "release": "./build/publish.sh"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "maps",
    "leaflet",
    "draw"
  ],
  "contributors": [
    {
      "name": "Jon West",
      "email": "ddproxy@gmail.com"
    },
    {
      "name": "Jacob Toye"
    }
  ],
  "license": "MIT",
  "readmeFilename": "README.md",
  "eslintConfig": {
    "root": true,
    "globals": {
      "L": true
    },
    "env": {
      "commonjs": true,
      "amd": true,
      "node": false
    },
    "extends": "mourner",
    "rules": {
      "no-mixed-spaces-and-tabs": [
        2,
        "smart-tabs"
      ],
      "indent": [
        2,
        "tab",
        {
          "VariableDeclarator": 0
        }
      ],
      "curly": 2,
      "spaced-comment": 2,
      "strict": 0,
      "wrap-iife": 0,
      "key-spacing": 0,
      "consistent-return": 0
    }
  }
}
  • name 设置程序或软件包的名称
  • author 设置包的作者名称
  • contributors 项目贡献者
  • homepage 包的主页
  • version 表明当前版本
  • license 包的许可证 (开源协议)
  • description 当前应用程序、软件包的简短描述
  • main 设置程序的入口点
  • private 设置为 true,可以防止包被发布到 npm
  • scripts 定义运行node脚本
  • dependencies 设置程序的依赖包
  • devDependencies 设置开发时的依赖包
  • engines 设置运行的nodejs的版本
  • browserlist 告知支持的浏览器及版本
  • repository 指定包仓库所在的位置
  • moudle

vue.config.js

官方文档
vue.config.js是vue工具链vue-cli的配置文件
vue-cli是vue项目构建的脚手架,能通过命令快速创建一个vue项目
vue-cli带有运行时依赖@vue/cli-service,该依赖基于 webpack 构建,带有合理的默认配置

# 快速创建一个vue项目
vue create hello-world

配置参考(vue-cli 3.3以上)

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const productionGzip = true // 是否使用gzip
const productionGzipExtensions = ['js', 'css'] // 需要gzip压缩的文件后缀
const useCDN = true // 是否使用cdn加速
// externals
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios'
}

// CDN外链,会插入到index.html中
const cdn = {
  css: [],
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
    'https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
    'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
  ]
}
module.exports = {
  // publicPath: process.env.publicPath,
  publicPath: '/gty',
  filenameHashing: false,
  productionSourceMap:!isProduction,
  assetsDir: 'assets',
  devServer: {
    port: 8090,
    proxy: {
      '/api': {
        // 代理api
        target: 'http://www.baidu.com',
        changeOrigin: true, // 是否跨域
        ws: true, // proxy websockets
        pathRewrite: {
          // 重写路径
          '^/api': ''
        }
      }
    }
  },
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: process.env.SYSTEM_TITLE
    },
    natural: {
      // page 的入口
      entry: 'src/mapviews/main.js',
      // 模板来源
      template: 'public/natural.html',
      // 在 dist/index.html 的输出
      filename: 'natural.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: process.env.SYSTEM_TITLE
    }
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/assets/css/css-variables.scss";'
      }
    }
  },
  configureWebpack: config => {
    const myConfig = {}
    if (isProduction) {
      // 1. 生产环境npm包转CDN
      //if(useCDN) {
      //  myConfig.externals = externals
      //}
      myConfig.plugins = []
      // 2. 构建时开启gzip,降低服务器压缩对CPU资源的占用,服务器也要相应开启gzip
      productionGzip && myConfig.plugins.push(
        new CompressionWebpackPlugin({
          // filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配的文件名
          threshold: 10240, // 文件超过10k,进行gzip压缩
          minRatio: 0.8,
          deleteOriginalAssets: false // 是否删除原文件
        })
      )
      // 去掉注释
      myConfig.plugins.push(
        new TerserPlugin({
          parallel: true,
          sourceMap: true,
          terserOptions: {
            warnings: false,
            compress: {
              drop_console: true,// 注释console
              drop_debugger: true, // 注释debugger
              pure_funcs: ["console.log"]
            }
          }
        })
      )
    }
    return myConfig;
  }
}

vite.config.js

官方文档

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
// Element Plus自动按需引入配置,先执行 npm install -D unplugin-vue-components unplugin-auto-import
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  define: {
    "process.env": {},
  },
  // 路径
  resolve: {
    extensions: [".js", ".vue", ".json", ".scss"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  server: {
    open: true,
  },
})