带你用vue写后台系列六（项目配置篇）

1、配置（关闭eslint语法检查）

安装webpack的脚手架

js 复制代码

npm install -D webpack-cli

配置

使用脚手架创建vue2项目会默认安装的插件（eslint) 这个插件是检查语法的，我们在main.js中定义了一个变量，没有使用 eslint 就会检测出错误，如何关闭这种语法检查呢

报错如下：

js 复制代码

Failed to compile with 1 error                                                                11:44:32 ├F10: AM┤

[eslint]
D:\LTB\NexusV2\src\pages\pcindex.vue
  1:1  error  Component name "pcindex" should always be multi-word  vue/multi-word-component-names

D:\LTB\NexusV2\src\router\index.js
  7:1  error  Mixed spaces and tabs  no-mixed-spaces-and-tabs

✖ 2 problems (2 errors, 0 warnings)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

在vue.confing.js文件中配置

js 复制代码

module.exports = defineConfig({
  lintOnSave: false
})

再次运行，这会已经好了！

2、.gitignore配置

之前我们提交项目的时候，项目之中会有很多文件被提交上去，接下来我们配置一下.gitignore 文件

.gitignore 文件是用来告诉 Git 哪些文件或者目录不应该纳入版本控制的。在项目中，有些文件是自动生成的、临时的，或者包含敏感信息，不希望被提交到版本库中，这时就可以通过 .gitignore 文件来排除它们。

一般会自动生成，不过有时间可能我们不注意就导致了缺失了这个文件！

js 复制代码

.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.log

tests/**/coverage/
tests/e2e/reports
selenium-debug.log

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

package-lock.json
yarn.lock

3、.editorconfig 配置

跑代码的时候发现一个问题，在不同的电脑和不同编辑器之中，我们代码的缩进竟然是不一致的，这个时候我们就需要用到我们的.editorconfig文件

创建 `.editorconfig` 文件

在项目的根目录下创建一个名为 .editorconfig 的文件

配置文件

root：指定是否该文件是根配置文件，如果设为 true，则会停止查找上级目录中的其他 .editorconfig 文件。

这里我们先配置一下root

js 复制代码

root = true

然后设置一下其他部分的配置

文件类型规则如 .js、.java 等，例如 [*.js]。
indent_style：指定缩进风格，如 tab 或 space。
indent_size：指定每级缩进的空格数或者 tab 的宽度。
end_of_line：指定换行符类型，可以是 lf（Unix/Linux）、crlf（Windows）或者 cr（老的 macOS）。
charset：指定字符编码，如 utf-8。
trim_trailing_whitespace：是否删除行尾的空格，可以是 true 或 false。
insert_final_newline：是否在文件末尾插入一个空行，可以是 true 或 false。

最后简单看看我们的配置部分

js 复制代码

# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true

# 匹配全部文件
[*]
# 设置字符集
charset = utf-8
# 缩进风格，可选space、tab
indent_style = space
# 缩进的空格数
indent_size = 2
# 结尾换行符，可选lf、cr、crlf
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true

# 匹配md结尾的文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

4、vue配置生产环境和测试环境

之前我们运行项目都是

js 复制代码

npm run serve

现在我们想要更换为

js 复制代码

npm run dev

1、 vue配置生产环境.env.production、测试环境.env.development

.env 无论什么环境都会加载

.env.production 生产环境加载

.env.development 测试开发环境加载

在项目根目录新建两个文件分别为.env.production文件 .env.development文件

在文件里面我们配置如下

在.env文件

js 复制代码

VUE_APP_NAME='vue测试名称'

.env.development文件：

js 复制代码

NODE_ENV = development  
VUE_APP_URL = 'developmentURL' //自定义变量  必须要以VUE_APP_开头定义

.env.production 文件：

js 复制代码

NODE_ENV = production    
VUE_APP_URL = 'productionURL' //自定义变量  必须要以VUE_APP_开头定义

2、配置 package.json

在package.json里面的"scripts"下配置【部分环境下删除注释，代码检测】

js 复制代码

"scripts": {
    "serve": "vue-cli-service serve",
    //打包测试开发版本  
    //--mode 后面需要对用文件的名字.env.development  重点是要和.env.后面的名字对应起来
    "build-development": "vue-cli-service build --mode development",
    //打包生产版本
    //--mode 后面需要对用文件的名字.env.production 重点是要和.env.后面的名字对应起来
    "build-production": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

配置完成以后重新npm install 安装依赖

3、app.vue中打印一下我们设置的这个VUE_APP_URL

js 复制代码

  mounted() {
    console.log(process.env,'process.env')
    console.log(process.env.VUE_APP_URL, "VUE_APP_URL");
  }

4、尝试在本地运行项目

会加载.env和.env.development两个文件

尝试在本地打开dist 运行vue打包好的文件

5、vue配置http-server

想要查看打包的dist文件夹 [非必要]

http-server 简单的零配置命令行HTTP服务器, 基于 nodeJs

js 复制代码

需要在全局安装 http-server 这个npm包
npm i -g http-server

在dist文件夹中打开cmd，执行http-server即可

6、配置自定义端口号：8888

js 复制代码

port: 8888, // 端口号

7、配置自动打开浏览器

js 复制代码

 autoOpenBrowser: true, //是否自动打开浏览器

带你用vue写后台系列六（项目配置篇）

带你用vue写后台系列六（项目配置篇）

1、配置（关闭eslint语法检查）

安装webpack的脚手架

配置

2、.gitignore配置

3、.editorconfig 配置

创建 .editorconfig 文件

配置文件

4、vue配置生产环境和测试环境

5、vue配置http-server

6、配置自定义端口号：8888

7、配置自动打开浏览器

创建 `.editorconfig` 文件