开发环境：development

生产环境：production

在 Vue CLI 环境下运行Vue应用，打包后的 dist 静态文件，无法直接通过本地服务器运行起来

通过 Express Node框架运行

npm i express -g 安装全局 express 命令

express profile 创建 express 框架集成的服务

目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── app.js ## 启动文件 node app.js
├── bin
│   └── www
├── public ## 存放静态文件，将vue打包的dist文件内容存放
│   ├── favicon.ico
│   ├── img
│   ├── index.html
│   └── js
├── routes ## 路由
│   ├── index.js
│   └── users.js
└── views ## 视图
    ├── error.jade
    ├── index.jade
    └── layout.jade

在 app.js 添加端口运行

1
2
3
app.listen(8080,()=>{
    console.log('http://localhost:8080');
})

node ./app.js 运行

通过这样的操作，将vue打包的静态文件运行起来了

环境变化，配置变化

默认通过 npm run build 打包的文件，是生产环境的，需要通过服务如 Nginx去代理运行静态文件

但如果在本地，就无法去运行 dist 下的文件，因为无法去解析静态文件，因为路径存在问题

在 src 下创建两个文件

env.development 开发环境的配置

env.production 生产环境

通过这两个文件，可以让开发环境使用 env.development ，在生产环境使用 env.production

env.development

1
2
NODE_ENV = development
VUE_APP_BASE_URL = /

env.production

1
2
NODE_ENV = production
VUE_APP_BASE_URL = "http://simplelife.com"

这样操作，可以使得不同的环境，使用不同的配置。

开发环境，我们可能使用 http://simplelife.com域名下的后台

但生产环境，我们会使用另外一个域名后台

核心内容

vue.config.js

1
2
3
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'? './': '/'
}

判断是否是生产环境，如果是的话，publicPath 根路径是 ./，不是的话/

dist文件下的目录结构

1
2
3
4
5
dist
├── favicon.ico
├── img
├── index.html
└── js

在 index.html 去请求静态资源的时候，必须是 ./ OR ''这样的根路径，才能保证正确请求资源 

1
2
3
4
5
<!--示例：开发环境，配置了开发环境的根路径-->
<link href="js/chunk-vendors.ca45571f.js" rel="preload" as="script">

<!--示例：开发环境，没有配置-->
<link href="/js/chunk-vendors.ca45571f.js" rel="preload" as="script">

因此，默认情况下，我们通过本地服务，无法看到 index.html有任何内容

所有，给vue.config.js添加如下一行代码，可以使用静态资源被正确请求

1
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'