npm run build 项目预览

vue-cli 搭建的项目

配置打包路径 2.x版本

vue项目中查找config文件夹进入index.js文件

config/index.js

修改文件夹下build的配置

将 assetsPublicPath: '/' 修改为 assetsPublicPath: './'

build: {
  assetsPublicPath: './'
}

在服务器中预览 dist/index.html 即可查看vue项目

在GitHub上预览，需要上传 dist 文件夹，vue-cli默认忽略上传dist文件夹

进入 .gitignore 文件中，删除 /dist/

命令行中执行 npm run build

不同的webpack版本或者打包管理器所生成的配置文件名甚至文件位置都可能不一样，找到相应的配置文件，修改 publicPath 或者assetsPublicPath 的配置

配置打包路径 3.x版本

项目根目录下创建 vue.config.js

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

如果资源加载成功，但页面不显示，查看 vue-router 的模式，若为 history 则改为 hash 模式

因为 history 模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404

在 npm run serve 时，node 有相应的后台配置，因此 mode 可以为 history

create-react-app 搭建的项目

在 package.json 文件中添加

"homepage": "./"

再运行 npm run build 进行打包，即可查看