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结果正确

在这里插入图片描述

更多推荐