网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

Vue前端生产环境发布配置的示例分析-创新互联

小编给大家分享一下Vue前端生产环境发布配置的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、成都做网站、建德网络推广、微信平台小程序开发、建德网络营销、建德企业策划、建德品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联建站为所有大学生创业者提供建德建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

一,资源文件发布配置

一般项目都是用vue-cli脚手架搭建项目,然后编写自己的代码。vue-cli脚手架生成的配置,默认资源文件都在static文件夹下面,build发布的js和css文件也是在static文件夹下面,index.html文件则是和static形成相对路径关系。

而实际我们的生产发布环境中,页面文件和资源文件不一定在同一目录下,页面文件和js,css文件也不在同一目录下。

以php的Yii2环境为例,页面文件一般都放在views文件夹,页面访问路径可能是 “http://xxxx.com/index.php/sales-task/create ” 这样的url形式。而js,css,image等资源文件则需要放在web文件夹下,访问路径则是从根目录开始访问的。如果在web目录下新建static文件夹,访问路径是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html” 这样的url形式。实际开发中我们不能把所有项目资源文件都放在web目录下的static文件夹,需要按项目新建不同的文件夹,在每个项目文件夹里再新建js,css,images等文件夹来安放各自的资源文件,访问路径应该是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html ” 这样的url形式。

因此修改配置文件如下:

  1. 把vue项目下的static文件夹名称改成项目名称,名称由小写英文字母,横杠连接符“-”,数字组成,例如sales-task。

  2. 修改config/index.js,把dev和build属性里的assetsSubDirectorys的值都改成项目名称,例如sales-task。build的assetsPublicPath值改成“/”,这样所有资源文件的引用都从根目录引用,避免相对路径错误。

  3. 修改build/webpack.dev.conf.js,把plugins的new CopyWebpackPlugin那里的from: path.resolve(__dirname, '../static'),改为from: path.resolve(__dirname, '../sales-task')。

  4. build/webpack.prod.conf.js里也做同样的修改。

  5. 上线前发布最终线上文件时,config/index.js里的build设置属性productionSourceMap: false,同时注释掉devtool: '#source-map',以避免产生.map映射文件。正式上线前这个还是要保留的,否则调试代码会很不方便。

二,图片文件的引用方式

vue项目中有2种图片引用方式,一种是静态引用,按照我们上面的资源文件夹配置,图片路径直接写到template的html代码里,格式示例:

这样在开发模式和发布模式下都能正常引用到图片,好处是和正常html代码格式一样,方便代码的编写和修改。缺点是图片文件地址是静态的,替换图片后如果不手动更换文件名无法解决缓存问题。

另一种方法就是更科学的模块化方式,用require引用图片,这样发布后图片文件名也会生成唯一识别码,图片修改后就会重新生成不同的文件名,从而能避免缓存问题,另外小图片还可以直接生成base64码,减少文件请求。require引用也有两种形式,直接写在:src属性上(注意这里和静态引用不一样,不是src而是:src了):

或者把图片引用数据写在data绑定数据里:


...

当然我还是推荐绑定数据的方法,代码看起来更清爽,也便于维护。

另外需要说明的是在vue的块内的样式里定义的background-image引用图片不需要require引用,直接通过相对路径引入就可以实现上面相同的效果。

三,后台接口调试方法

这里后台接口调试指的是在开发模式下的调试。

vue的开发模式是通过webpack-dev-server启动一个本地服务,所以在开发模式下调用后台接口就产生了跨域问题。这里要说明一下,如果要调用的后台接口本身就是跨域的接口,也就是说页面和接口文件不在同一个域名下,跨域问题需要在后端设置,这时其实vue项目不需要特殊配置了,因为本地访问和发布后访问都是跨域的,解决后端跨域就都解决了。所以我们这里要配置的,还是针对发布以后页面和接口不存在跨越问题,只是开发模式下本地服务和接口产生的跨越问题,如何解决。

首先还是打开config/index.js,找到module.exports里的dev,里面有一项proxyTable,默认是空的,我们要按照我们的接口路径,修改如下:

  proxyTable: {
    '/sales-task-api':{
      target:"http://xxxxx.com/sales-task-api",
      changeOrigin:true,
      pathRewrite: {"^/sales-task-api" : "/"} 
    }
  }

注意上面3个地方的接口路径名称(示例中的"sales-task-api")要保持一致。

例如实际要调用的接口地址是:http://xxxxx.com/sales-task-api/get-user-list ,经过这样配置设置后,我们在vue中就可以通过 "/sales-task-api/get-user-list" 这样的地址调用,也不会产生跨域问题。同时因为是采用的根目录访问路径,在生产发布以后也不会产生接口访问路径错误问题。

以上是“Vue前端生产环境发布配置的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站标题:Vue前端生产环境发布配置的示例分析-创新互联
浏览地址:http://bjjierui.cn/article/deggcp.html

其他资讯