Vue2：vue-admin-template项目修改访问端口和网站名（人力资源项目）

创建vue-admin-template项目，启动后，默认的访问路径即主机IP+默认端口号9528：http://localhost:9528/

当然，我们可以通过配置来更改默认端口和项目访问路径

一、修改端口号

1、本地服务端口: 在vue.config.js中进行设置

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，但是又不同于webpack，相当于改良版的webpack

如下，是开发环境服务端口的位置

// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
1
2

我们看到上面的 process.env.port实际上是一个node.js服务下的环境变量。
在项目下, 我们发现了.env.development和.env.production两个文件

development => 开发环境：当我们运行npm run dev进行开发调试的时候,此时会加载执行.env.development文件内容

production => 生产环境：当我们运行npm run build:prod进行生产环境打包的时候，会加载执行.env.production文件内容

所以,如果想要设置开发环境的接口,直接在.env.development中写入对于port变量的赋值即可

# 设置端口号
port = 8888
1
2

可以看到项目的端口号已经变成了8888

2、注意项

① 值‘8888’后面不能留有空格
② 修改服务的配置文件之后必须要重新启动服务才能生效

二、修改网站名

1、网站名：在configureWebpack选项中的name选项

通过阅读代码，我们会发现name实际上来源于src/settings.js文件

我们可以将网站名称改成"人力资源管理平台"
保存代码，重启项目