本文目录一览:
- 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页面引入:
这也是我尝试两天才成功,走了些弯路,希望帮助到有同样问题的打工人,共勉!