vue-cli中设置publicPath的几种方式对比

目录

• 设置publicPath的几种方式对比
• publicPath打包设置
• vue.config.js publicPath "./" npm run build无效

设置publicPath的几种方式对比

publicPath打包设置

1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/'

// vue.config.js
module.exports = {
  publicPath: '/',
}

html中被打包的css和js路径如下

2.设置 publicPath: ‘./’ 好处是随处可打开,直接在打包文件夹就可打开html页面

// vue.config.js
module.exports = {
  publicPath: './',
}

html中被打包的css和js路径如下

3.设置 publicPath: 'vmst’

// vue.config.js
module.exports = {
  publicPath: 'vmst',
}

html中被打包的css和js路径如下

vue.config.js publicPath "./" npm run build无效

• outputDir
• assetsDir
• indexPath

必须填

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: "dist",
  assetsDir:"static",
  indexPath:'index.html',
  devServer: {
    overlay: {
      warnings: false,
      errors: false
    },
    // 设置主机地址
    host: 'localhost',
    // 设置默认端口
    port: 8080,
    // 设置代理
    proxy: {
      '/api': {
        // 目标 API 地址
        target: 'http://192.168.124.231:8707/', // 接口的域名
        // 如果要代理 websockets
        ws: false,
        // 将主机标头的原点更改为目标URL
        changeOrigin: true
      }
    }
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。