先说结论
- vue-router是hash模式时 publicPath:'./' 最合适，省事
- vue-router是history模式时，publicPath 和 outputDir 最好一致，整个打包后的文件夹拖到静态资源根目录
- 增加环境变量打包要用时 注意加一行 NODE_ENV = production
实践对比
- history/hash，打包后放进服务器的根目录下，publicPath和outputDir一致即可
publicPath: "/lego_page/", //决定了html索引打包后的文件的基础路径
outputDir: 'lego_page', //决定打包后的文件夹名
- 放进服务器静态页面的根目录里
- 服务器没做配置时，history模式 非根路径刷新 就是404
相对 publicPath 的限制
相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:
- 当使用基于 HTML5
history.pushState的路由时； //history模式下 publicPath不可以使用 './' - 当使用
pages选项构建多页面应用时。//一般打包后都是一个index.html单页面应用 不用管这个
vue-router mode: 'history',时 //由于publicpath为./ 路由跳转失效
publicPath: "./",
outputDir: 'lego_page2',
vue-router mode: 'hash',时
publicPath: "./", //只有hash模式可以这么玩
outputDir: 'lego_page2',
环境变量
- 一般项目里 js/vue 文件的一些地方要根据不同的环境变量决定采用哪些值，不要修改 NODE_ENV ，它不但是环境变量，而且还决定了webpack配置。推荐借助 VUE_APP_* 来当变量
- "serve": "vue-cli-service serve",
- 对应的配置文件是 .env.development
一般配置打包时不同模式用的环境变量不同，下面以pre为例
1.package.json里增加语句
"build:pre": "vue-cli-service build --mode pre",
2.项目根目录与package.json平级 增加文件 .env.pre
NODE_ENV = production
VUE_APP_Mode = pre
- js/vue文件中使用时
if(process.env.VUE_APP_Mode==='pre'){
host = "http://preapi.try.com"
}
只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。
- 特别要注意NODE_ENV = production 这句话会按production模式优化打包
- 下面是对比 不加/加 该语句打包后的区别
- 不加NODE_ENV = production时 css打包进js，且没使用生产模式打包优化
- 加NODE_ENV = production js和css分离，且使用了production打包优化配置，生成的js文件名由内容生成哈希值，再次打包后，有变动的文件名会更改，防止浏览器缓存
