本文目录一览：
vue项目如何打包上线–笔记
1.第一步
然后会生成一个dist目录的文件夹
2.将dist文件夹拎出来，我本地已经打好localhost服务器，使用IIs搭建的，如果想输入： localhost:8001/project 打开文件，需要在index.js文件配置：
如何让vue项目然后通过ip地址访问，需要在package.json配置项加个 –host 0.0.0.0
3.
build/webpack.prod.conf.js
config/index.js
4.重复第一步npm run build
因为这边我是本地搭建的服务器，菜菜的我不会写接口，只能模拟了，我这边是在服务器指定文件夹下建了个api文件夹，里面放对应的json文件，如果是团队开发，只要把dist文件扔给后端，后端会写好接口的，嗯就这样
5.运行结果对比
6.进一步优化
当项目日趋庞大，打包后的app.js会越大，—–异步组件加载
vue打包成statictemplates格式
1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的)2.在cmd里面运行npmrunbuild,(运行的是build里面的build.js文件)生成的包放在dist下面
vue打包时资源如何分目录放置？
static本来放置的就是不打包的文件
如果需要文件打包，请放到src下
请采纳
vue中静态js文件怎么打包
1.问题描述
在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入
的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！
2.解决方法之一
静态资源static存放位置放在src目录下
你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的
实践证明这个写法是错误的，这个会在你打包的时候直接抱一大堆错（如css-loader错误），连项目都跑不起来。
于是我用下面的写法：
这种写法也是不可以的，原因是你的静态资源文件static不在src目录，而在vue中src目录是相对根目录是src目录，所以如果你想用上面的写法，必须要把static放在src目录下。如上面图一图二
注意：不能把static/images/user.png写成 /static/images/user.png，否则图片还是失效。
以上是关于文件存放位置以及css中引入图片问题，如果是通过img标签引入图片的话，相对简单，直接写绝对地址就行了，并且静态资源static文件夹的位置可以在src里面，也可以放在与src同级下，但是为了不出现上面情况，放在src里面即可！
img引入图片：
以上是一种解决图片失效问题的方法，当然，如果非要把static静态资源目录放在与src同级目录下，也是有解决方法，例如通过导入图片的方式（本人未实践），可以自行尝试！
vue配置文件不打包
开发过程中经常需要修改后端接口地址，如果将接口地址放进打包文件中，不便于随时修改后端接口地址
var ApiUrl ;
if(location.hostname===’localhost’){ //本地环境
ApiUrl = ”
}else if(location.host===’39.100.134.99′){ //线上环境
ApiUrl = ”
}
export {
ApiUrl
}
import {ApiUrl} from ‘../static/js/config’
Vue.prototype.baseUrl = ApiUrl;
this.$http.get(this.baseUrl+’/api/v1/apiname’).then((res)={
}).catch((err)={
})
dist文件为打包的文件，static/js/config.js为接口的配置文件
注：此方法的原理是vue不会将static中的文件进行打包，static中的文件属于静态资源
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/310085.html
微信扫一扫 
支付宝扫一扫 