vue-cli 静态资源在另一台服务器上.要如何配置路径

Question

问题:

现在项目用vue-cli开发.遇到一个问题.就是说开发环境,测试环境,生产环境的静态资源路径都不一样.但是都在其他的服务器.

例如:

我开发环境静态资源都在本地的static目录下面.那么引用的时候直接根据目录来就可以.
上传到测试环境后.项目本身在 ceshi.com 下.但是图片资源都在 file.ceshi.com 下.这个时候我build之后的代码引入文件路径就出问题了.等发布后在生产环境路径又不一样.请问要如何解决这个问题

理想状态:
通过不同的命令参数替换静态资源路径, 例如:
1,开发环境 node build/build.js ./assets : 那么该环境下的所有静态资源都是访问./assets下面的
2,测试环境 node build/build.js file.ceshi.com 那么该环境下的所有静态资源都是访问file.ceshi.com下面的
求大神支招
目前获取node命令行参数已经完成.不知道该如何抛出全局的变量

测试过这个.但是它把所有的引入都替换掉了.包括css js的. 我希望的是只替换掉静态资源的部分

Answer 1

搞掂了. 用命令行获取参数. 指定assetsPublicPath.开发的时候静态资源就按平时那样引用
打包后会把这些路径都替换成指定的路径
例如: node build/build.js http:www.**.com/
静态资源都会被替换成这个

Answer 2

不访问自己服务器的资源，就等于是跨域了。
第一：需要写绝对路径；
第二：需要对方cors允许get方法;
第三：己方对返回资源的格式需要解析支持；
如果是同一域名下，可以设置origin到一个位置。可以实现完美跨域；
总之把资源放在不同服务器上比较麻烦，但是像github官网做的就比较完美了，设置了很严谨的cors。

Answer 3

请问具体是怎么解决的呢？能告知一下吗？我最近也遇到了这样的问题

Answer 4

webpack的话只需要设置好output.publicPath就行了

Answer 5

我用的是vue cli3, 较早版本的道理也一样, 根据这个改一下就行
思路就是修改图片类型文件的 file-loader 里的 publicPath

module.exports = {
chainWebpack: config => {
    config
      .module
      .rule("images")
      .test(/\.(jpg|png|gif)$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        // 使文件大小小于此limit值(单位为byte)的文件转换为base64格式
        // 大于此limit的, 会执行options中的fallback配置项插件, fallback默认值为file-loader, 
        // 而url-loader的options配置项也会被传递给file-loader
        limit:10,
        // 根据环境使用cdn或相对路径
        publicPath: process.env.NODE_ENV === 'production' ? 'https://oss.xx.com/img' : './',
        // 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
        outputPath: 'img',
        // 配置打包后图片文件名
        name: '[name].[ext]',
      })
      .end();
}