vue项目优化(个人使用)

在根目录下创建 .gitignore文件，这个文件在用git提交时会屏蔽提交配置了的文件（我屏蔽了node_modules等文件的上传，以及带有某些后缀的文件）以下是我的代码

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

这是创建的目录（根目录下）

如有使用vscode可在项目中做一个配置文件 .editorconfig（需要下载vscode插件：EditorConfig for VS Code）

root =true
[*.{js,jsx,ts,tsx,vue}]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

在很多时候会用到大量的相对路径，此时需要在vue.config.js中配置这段代码

module.exports = {
  lintOnSave: false,
  publicPath: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("_c", resolve("src/components"));
  },

  // 打包时不生成.map文件
  productionSourceMap: false,
 
};

之后引用文件就可以如下

import request from '@/lib/request';

打包时也不会生成map文件，减少项目打包体积。

在vue.configconfig中，可以添加@来代表src目录,_c代表components目录

devServer这个配置是跨域配置

const path = require("path");
// const webpack = require("webpack");
const resolve = dir => path.join(__dirname, dir);
const BASE_URL = process.env.NODE_ENV == "procution" ? "/iview-admin" : "/";
module.exports = {
  lintOnSave: false,
  publicPath: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("_c", resolve("src/components"));
  },

  // 打包时不生成.map文件
  productionSourceMap: false,
  devServer: {
    proxy: {
        '/***': {
            target: 'http://localhost:***',
            ws: true,
            changeOrigin: true,
            pathRewrite: {
                '^/***': '/***'
            }
        }
    }
}
};