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

最新推荐文章于 2025-07-11 14:06:50 发布

原创最新推荐文章于 2025-07-11 14:06:50 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #nginx

vue 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个Vue项目的打包部署流程，包括环境变量配置、路由模式设置、构建参数调整等步骤，并详细说明了如何通过Nginx服务器发布项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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',
....