关于vue-cli项目npm run build:prod打包使用nginx代理本地运行记录

1. 打包前准备

打开.env.development 如下对接口地址进行修改
.env.local文件和.env.production文件同上

ENV = 'development'

# 接口地址
VUE_APP_BASE_API = 'http://192.168.5.103:8091/'
...

打开router目录下的index.js，更改路由模式为hash（原本就是hash的可以省略）

export default new Router({
  mode: 'hash', 
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

打开vue.config.js文件，对publicPath、assetsDir进行修改

module.exports = {
  // 部署生产环境和开发环境下的URL。
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: './static',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
....

2.运行npm run build:prod命令生成dist目录

3.下载nginx并修改配置项

下载地址

解压完之后对nginx.conf文件中的http 根据自己需要进行修改

将dist下的文件拷贝到nginx的html目录进行替换
最后双击nginx.exe运行或者在目录输入cmd在命令行使用start nginx运行nginx

打开http://localhost:9526结果正确