vue 静态项目 开发和线上配置

静态站点配置

看下面这个图片，index.html和static文件夹 开发时的相对路径和编译完成后的相对路径是一样

开发配置

//静态文件目录
app.use('/static', express.static('./static'))


output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/', //注意和生产配置不一样
    filename: '[name].js'
  },

生产配置

 output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: './', 
    filename: '[name].js'
  },

demo

比如现在有这样一个图片static/demo.jpg 那么我们应该怎么引入才能保证2种环境都能正确访问呢？

尝试1

<img src="/static/demo.jpg">

这样写看似没有问题,本地环境没问题，打包也成功了，但是你把dist放到服务器上后会发现图片看不到，

上面我是用webstorm打开的效果，可以看到图片和css加载的路径是完全不一样的。注意图片引入的路径中有/代表着绝对路径，所以放到服务器上就会变成直接加在域名后面的网络地址。但一般一个域名上会放很多个项目，这种方式肯定不行

尝试2

<img src="./static/demo.jpg">

这样写的话需要看你的webpack配置,比如我的vue2的项目使用了vue单文件形式编译，那这样写在本地和线上编译都会报错，因为.vue文件里的html还要通过vue-loader/lib/template-compiler.js解析或者什么的，所以它会去找./static/demp.jpg这个模块，肯定找不到，所以编译都通不过。
不过如果你是分开写js,html,css的，并使用其他loader去加载html的话，可能就可以这样做，我之前的用法是多文件写法,然后html使用raw-loader去加载，他通过这个loader加载出来后只是一个字符串，所以不会报错

import Tpl from './template.html'
export default {
    template : Tpl,
}

尝试3

有没有更好的方法呢

有~

<img src="static/demo.jpg">

最终终于找到了最优写法，这样不管是vue单文件，还是多文件，不管是开发环境，还是编译后都能正确访问到图片，不过前提是vue单文件需要加上url-loader。
为什么会这样呢？自己理解吧~

回家作业

如果我有多个静态目录 该怎么办呢？