最近在搞Vue CLI的项目打包，出现了常见的路径问题，经过研究问题和文档，现在有了自己的看法，以下所有内容都是建立在Vue CLI3之上。
关于vue.config.js文件：
这个文件的配置主要是用来设置打包的文件相关信息的命令：npm run build，而调试模式npm run serve，只不过是是对build到内存后，再次启动到node服务器。
在调试模式下，这个文件的更新并不会因为ctrl+s保存而从新读取，只有重启服务才能生效。
vue.config.js的详细配置信息请查看文档。
关于预览打包
这个问题一般都是仅仅需要你更改下vue.config.js中的publicPath设置，改为publicPath: "./"，把路径改为相对路径。
Hash模式路由的配置
在这种情况下，一般只需要操作上面的路径更改就可以了。
HIstory模式路由的配置
先引用一段文档里的话：
相对 publicPath 的限制
相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:
当使用基于 HTML5 history.pushState 的路由时；
在启用HTML5的History模式时，不应该把publicPath改为相对路由，这样请求的js和css文件会出错。
image.png
这是因为在使用嵌套路由后又使用了History模式，设置相对路由，打包后的静态文件也是以相对路径引入，所以会在前面加上去index这个当前路径的父路由。会因获取不到js文件而出错。
因此文档建议使用绝对路径。
在不使用嵌套路由时，按照前文的介绍配置是没有问题的，在嵌套路由的时候必须使用绝对路径。
关于其他路径问题
我们在Vue开发中常常使用一个vue-lazyload来处理懒加载图片，这个图片的路径问题也是需要考虑的。
image.png
同样默认使用相对路径，导致出现前文所说的问题。
使用绝对路径后问题解决。
image.png
再次阅读文档后发现，给出的DEMO也是绝对路径(看文档不仔细😂)。
其他闲话
这个项目最开始是使用的Hash模式路由，修改publicPath为相对后就解决了问题。但是为了提高用户体验，要缓存滚动条位置，所以不得不使用History模式路由，所以一出现了一系列问题😭。

vue项目打包到上线的基础做法总结
1、开发环境到生产环境的转变
项目开发结束之后，首先我们需要通知后端，获取一个线上的路径，之后将之前的开发路径切换为线上路径。
打开项目中config文件夹里面的 dev.env.js 文件。
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// BASE_API: '"http://192.168.1.***:3838/"' //开发者路径
BASE_API: '"http://sdk.********.cn:3838/"'  //线上路径，替换开发者路径
})
打开项目中config文件夹里面的prod.env.js 文件，将后端给的线上路径填入。
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://sdk.*********.cn:3838/"' //线上路径
}
2、设置统一的请求路径
犹豫项目打包之后，所有的js，css，图片都会在各自统一的文件夹内，所以，之前的路径需要改掉，单个修改花费时间太长，那么应该怎么做呢。
打开build文件夹里面的utils.js，根据需求添加，通常会添加两个../。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath : '../../'  //新添加的内容，路径配置
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
在某种情况下，会出现html主路径引入不正确的问题，这时候我们需要配置config文件夹内部的index.js文件,修改assetsPublicPath，注意，这里的assetsPublicPath是build生产环境下的assetsPublicPath路径，而不是dev开发环境下的assetsPublicPath。
image.png
这个时候，就可以执行 npm run build 将项目打包，置于你们后端上线了。祝各位早日成为前端大牛，喜欢的点关注了亲亲！
qinqin.gif

文章目录
说明
发现一些朋友在群里询问如何线上发布vue项目.
从而暴露出来很多有意思的问题.
所以这篇博文简单介绍一下vue项目线上发布的情况.
本地环境
mac os
node 10.16
vue 2.6
vue-cli 4.0
线上环境
centOS6
node 10.16
nginx
vue是最近很火的前端框架,
所以它依赖的是浏览器,及我们可以从浏览器定位到你服务器nginx,然后nginx把指定的静态资源转发出来,最后我们在浏览器渲染看到
不管你的服务器是iis,apache还是nginx
只要http可以定位到服务器的静态资源即可.
很多人会有问号?
那为什么我在开发的时候用node命令直接就启动了呢!
npm run dev
这是因为我们本地并没有web静态服务器去定位资源,
所以node本地启动了web服务器来守护一个进程,达到资源转发的效果,
而且vue 启动的本地server可以直接帮我们做api代理.
如下是部分关于本地server的配置
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/admin': {
target: '这里是你的代理api地址',
changeOrigin: true,
secure: false
}
}
}
所以线上发布的时候,我们服务器本来就有web服务器,完全不需要node再启动一个web服务,或者说干脆不需要node都可以.
项目build
项目build构建文件
打包压缩后的静态资源文件被放到了dist 目录下
const {
run
} = require('runjs')
const chalk = require('chalk')
const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report')
run(`vue-cli-service build ${args}`)
const port = 9526
const publicPath = config.publicPath
var connect = require('connect')
var serveStatic = require('serve-static')
const app = connect()
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
)
app.listen(port, function (){
console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
if (report) {
console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
}
})
} else {
console.log(chalk.green(`环境:${process.env.NODE_ENV},publicPath${publicPath},args:${args}`));
run(`vue-cli-service build ${args}`)
}
发布dist
把你的生成静态文件上传到服务器,
我是直接git clone
配置nginx server {
listen       80; # 监听80端口
server_name admin.yijiebuyi.com; # 浏览器域名
location / {
root /home/www/admin/dist/;  # 服务器静态文件存放的目录
index index.html; # 主页
}
location /admin {
proxy_pass http://api.yijiebuyi.com/; # 代理接口地址
}
}

Vue 项目在开发时运行正常，打包发布后却出现各种报错，这里整理一下遇到的问题，以备忘。
1、js 路径问题
脚手架默认打包的路径为绝对路径，改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath，把原来 ‘/’ 改为 ‘./’
assetsPublicPath: './'
}
2、img 路径问题
在 build/utils.js 文件中 ExtractTextPlugin extract 节点下，添加一行：publicPath: ‘…/…/’
fallback: 'vue-style-loader'publicPath: '../../'
} ['vue-style-loader'}
3、favicon.ico 问题
① 在 build/webpack.prod.conf.js 文件中 new HtmlWebpackPlugin 节点下， 添加一行：favicon: config.build.favicon
template: 'index.html'})
② 在 config/index.js 文件中 build 节点下，添加一行 ： favicon:path.resolve( __dirname,‘…/src/favicon.ico’ )( PS：favicon.ico 放在 src 目录下)
module.exports =favicon:path.resolve(__dirname,'../src/favicon.ico'}
4、IE9+ 兼容性问题
由于 axios 是基于 promise 之上实现的，在 IE 下会有兼容性问题。
① 安装 babel-polyfill
yarn add babel-polyfill
② 修改 build/webpack.base.conf.js 文件中 entry 节点
app: ['babel-polyfill','./src/main.js'}
5、禁止生成 .map 文件
修改 src/config/index.js 中 productionSourceMap 值
productionSourceMap: