本文目录一览：
- 1、vue-cli3打包之后的文件为何不能本地打开
- 2、vuecli3打包部署 非根目录下 配置vue.config.js publicPath
- 3、vue-cli3 pubic静态资源引入
- 4、VueCLI3打包优化–抽离依赖包
- 5、vue打包后发布文件路径错误且报错Unexpected token
- 6、关于Vue-cli引入外部js资源文件失败的一点思路
vue-cli3打包之后的文件为何不能本地打开
meta charset=”utf-8″
vue-cli 提供了一个入口让你能配置修改 webpack .
在根目录下新建一个 vue.config.js 文件, 然后在其中修改 publicPath 这个选项:
vue.config.js :
将这个选项设置为 ‘/’ (当前文件夹).
现在你就可以本地打开 dist 文件夹中的 index.html 了.
但是会有一个小问题, 就是如果你使用了 vue-router (路由)的话, 会发现路由跳转有问题了.
这个路径明显不对呀…
原来是因为我的 vue-router 的模式设置成了 history 模式:
src/router/index.js :
只要把 mode 改为 hash 就可以正常跳转了(其实默认是这个模式的, 但如果你的项目中mode被改了你得知道是这个问题).
vuecli3打包部署 非根目录下 配置vue.config.js publicPath
从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 ，则设置 publicPath 为 /my-app/。
这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：
在vue.config.js文件中添加如下：
vue-cli3 pubic静态资源引入
静态资源文件放入public文件夹下（类似cli2里面的static文件夹），打包时不会被wenpack处理，输出文件在dist文件夹下。
在index.html中通过
script src=”%= BASE_URL %clipboard.min.js”/script
参考
link rel=”icon” href=”%= BASE_URL %favicon.ico”
可以看到项目中ico图标就是通过这种方式引入！！
public文件夹下文件是不被处理的，所以我们可以创建一个config.js文件
config.js
在index.html中引入
使用
遇到的问题，修改打包后的config.js文件，值不更新
排查方式：
1.先确认config.js文件是否更新，浏览器的缓存可能会影响
2.可以修改js文件名，比如加上hash值，config.hashxxx.js，在index.html引入的地方也要对应修改
综上
本地测试ok
VueCLI3打包优化–抽离依赖包
项目开发中，使用了很多依赖包，如 Vue 、路由管理 Vue-router 、状态管理 Vuex 、UI组件库( ElementUI 、 Vant )、图表（ echarts ）等。打包构建，发现有一些包体积过大，会影响首页加载速度。如下所示：
从上图的分析包中，可以将以下插件抽离：
需要删除的依赖包
VueCLI3自带了 webpack analzer ,可通过如下命令即可生成分析包内容，在 dist/report.html
更多请查看：
减少打包体积、加快打包速度，常规的优化有以下两种：
按需加载是通过只引用使用的组件来减少体积，这就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。
这里选择CDN的方式， 配置流程 ：
可根据环境变量，仅在线上采取使用CDN,开发环境直接使用npm依赖包即可。
进行包分离以后，打包结果：
vue.config.js 的pages为：
修改如下的地方：
外部扩展(externals)
使用webpack的externals来指定echarts无法减少包的大小
vue-cli利用webpack-bundle-analyzer分析构建产物
vue打包后发布文件路径错误且报错Unexpected token
项目执行npm run dev和npm run build-dev(开发环境打包)都没有问题
当使用npm run build-prod(生产环境)打包，发布之后查看报错：
此处所采用的的是vue-cli2.x
1.修改文件config/index.js，修改build配置中的内容
如上修改后打包可以打开不在报错，但是找不到图片以及文字了
2.修改build/utils.js文件，修改publicPath
重新打包后，访问正常
用过与该项目相同的脚手架，搭建了两个项目，然而另外的项目却没有该问题，暂未发现问题所在。
本项目Nginx配置中存在前置web-pmms
最终还原了上方的三处修改，将config/index.js中assetsPublicPath做如下修改
assetsPublicPath是配置为相对路径还是绝对路径，取决于你打包后前端资源怎么发布部署
vue-cli2.x版本
情况1： 如果应用配置在一个域名的根路径上，例如，则直接配置assetsPublicPath:’/’;
情况2： 如果应用配置在一个域名的子路径上，例如 ，则应设置assetsPublicPath:’/myapp/’;
这个值也可以设置为空字符串(”)或相对路径(‘./’)，这样所有资源都会被链接为相对路径，这样打包后的文件可以被部署在任意路径。
vue-cli3.x版本
需要在vue.config.js 添加baseUrl:‘xxx’
vue-cli 4.x版本
需要在 vue.config.js 中修改 publicPath:’xxx’
关于Vue-cli引入外部js资源文件失败的一点思路
首先申明我是window系统下Vue-cli 4.5.3版本，脚手架整体基于vue2内核。
1.正常js文件如果有使用export向外暴露对象，将js放在src/assets都是可以通过import直接引入。但有有些情况下我们需要导入第三方的js文件，例如近期我在做的阿里云点播视频上传SDK，包括最近在学习的ThreeJs，如果单单只是在public中index.html通过script src=””/script引入，是不够的还需要在具体vue页面引入：
这也是我尝试两天才成功，走了些弯路，希望帮助到有同样问题的打工人，共勉!
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293726.html
微信扫一扫 
支付宝扫一扫 