vue 部署到线上问题

1.首先把

mode:history注释掉

2config:index.js里的build里面改成

assetsPublicPath: './',
3.build里面的utils.js 里
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
改这个地方
      publicPath:'../../'   
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
}
另外。线上不用解决跨域问题,需要去掉解决跨域的那些东西

### Vue 线部署 CSS Public 文件夹静态资源访问路径配置解决方案 #### 修改 `publicPath` 设置 为了确保打包后的静态资源能够正确加载,可以在项目的 `vue.config.js` 中修改 `publicPath` 参数。默认情况下,`publicPath` 是 `'/'`,这表示所有的静态资源都会相对于根域名来查找。 如果应用不是部署在服务器的根路径下,则需要调整此参数以匹配实际部署路径[^3]: ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-app-name/' : '/' } ``` #### 使用绝对路径引用公共文件 对于放置于 `public` 文件夹内的资源,推荐采用绝对路径的方式进行引用。这样可以避开 Webpack 对这些资源的处理逻辑,从而保持原始路径不变。例如,在 HTML 或者组件模板里可以直接指定 `/img/logo.png` 这样的形式去获取位于 `public/img/` 下面名为 logo.png 的图像文件[^5]。 然而需要注意的是,当涉及到 CSS 内部定义样式表时(如 `.class { background-image: url('/path/to/image'); }`),由于浏览器解析 URL 的特性,这里的斜杠开头代表网站根目录位置;所以应当依据实际情况决定是否加上前置路径前缀[^4]。 #### 定义全局变量用于构建动态链接 考虑到不同环境可能有不同的基础URL需求,可以通过定义一个或多个全局可用的变量来进行灵活控制。具体做法是在项目入口处注入所需的基础地址字符串,并通过 PostCSS 插件等方式将其应用于最终编译出来的样式规则中。下面是一个简单的实现思路: 1. **创建自定义插件** 编辑 `postcss.config.js` 添加如下代码片段: ```javascript module.exports = { plugins: [ require('postcss-url')({ url(asset) { const envPrefix = process.env.VUE_APP_PUBLIC_PATH || ''; return `${envPrefix}${asset.url}`; } }) ] }; ``` 2. **设置环境变量** 在 `.env.production` 文件中加入一行声明 VUE_APP_PUBLIC_PATH 变量并赋值为目标站点的基础路径,像这样: ``` VUE_APP_PUBLIC_PATH=/myapp/ ``` 上述措施有助于解决因上下文差异而导致的部分静态资源丢失问题,特别是针对那些存放在 `public` 目录里的素材而言更为有效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值