常见配置文件
配置文件
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,
},
})
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Faith!
评论