详解详解Vue前端生产环境发布配置实战篇前端生产环境发布配置实战篇
前言前言
首先这篇文章是写给Vue新手的，老司机基本不用看了。
当我们刚接触vue的时候，特别是对于第一次用前端框架的同学来说，心情可以说是比较激动的，框架带来的种种新体验，是
以前jQuery无法给你的兴奋和满足感。但是在体验了几个demo的新鲜感之后，我们就要考虑如何把框架结合到我们实际的开
发中如何应用的问题了。
下面我主要总结三个和生产发布相关的问题：资源文件发布文件夹配置，图片文件的引用，以及后台接口调试方法。
一，资源文件发布配置一，资源文件发布配置
一般项目都是用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形式。
因此修改配置文件如下：因此修改配置文件如下：
把vue项目下的static文件夹名称改成项目名称，名称由小写英文字母，横杠连接符“-”，数字组成，例如sales-task。
修改config/index.js，把dev和build属性里的assetsSubDirectorys的值都改成项目名称，例如sales-task。build的
assetsPublicPath值改成“/”，这样所有资源文件的引用都从根目录引用，避免相对路径错误。
修改build/webpack.dev.conf.js，把plugins的new CopyWebpackPlugin那里的from: path.resolve(__dirname, ‘../static’)，改为
from: path.resolve(__dirname, ‘../sales-task’)。
build/webpack.prod.conf.js里也做同样的修改。
上线前发布最终线上文件时，config/index.js里的build设置属性productionSourceMap: false,同时注释掉devtool: ‘#source-
map’,以避免产生.map映射文件。正式上线前这个还是要保留的，否则调试代码会很不方便。
二，图片文件的引用方式二，图片文件的引用方式
vue项目中有2种图片引用方式，一种是静态引用，按照我们上面的资源文件夹配置，图片路径直接写到template的html代码
里，格式示例：
<img src="/sales-task/images/logo.png">
这样在开发模式和发布模式下都能正常引用到图片，好处是和正常html代码格式一样，方便代码的编写和修改。缺点是图片文
件地址是静态的，替换图片后如果不手动更换文件名无法解决缓存问题。
另一种方法就是更科学的模块化方式，用require引用图片，这样发布后图片文件名也会生成唯一识别码，图片修改后就会重
新生成不同的文件名，从而能避免缓存问题，另外小图片还可以直接生成base64码，减少文件请求。require引用也有两种形
式，直接写在:src属性上（注意这里和静态引用不一样，不是src而是:src了）：
<img :src="require('../assets/images/logo.png')">
或者把图片引用数据写在data绑定数据里：
<img :src="logoImg">
...
<script>
export default
{
data()
{
return {
logoImg:require('../assets/images/logo.png')
}
}
}
</script>
当然我还是推荐绑定数据的方法，代码看起来更清爽，也便于维护。
weixin_38607552
- 粉丝: 6
- 资源: 944
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
评论0