vue打包流程

最新推荐文章于 2024-06-25 14:43:35 发布

公孙元二

最新推荐文章于 2024-06-25 14:43:35 发布

阅读量415

点赞数

分类专栏： Vue2.x 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/Amnesiac666/article/details/110819411

版权

Vue2.x 专栏收录该内容

166 篇文章 9 订阅

订阅专栏

1.在public下创建一个config.js文件
文件里面写入(该url是服务器接口地址)：

window.global_config = {
    BASE_URL: 'http://172.168.2.88:8080'
}

2.在public/index.html文件里引入这个config.js文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="./config.js"></script>
  </body>
</html>

3.把vue.config.js文件里的publicPath的值’/‘改成’./’
(如果没有vue.config.js文件则自己创建一个，放在项目根目录下，和src文件夹同级)

module.exports = {
  publicPath: './',

4.修改axios的默认请求地址（比如在main.js）：

import axios from "axios"
axios.defaults.baseURL = window.global_config.BASE_URL

5.使用npm run dev命令打包。
（如果package.json文件里的"build:prod": “vue-cli-service build”，则使用npm run build:prod命令来打包）

如果步骤4对请求进行了自定义改造。则
同样将axios的baseURL改成后端服务器地址，例如"baseUrl: 127.0.0.1"或者使用环境变量process.env.BASE_API 。
在这里插入图片描述
如需学习按环境变量进行打包，点击这里

公孙元二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue打包流程

1.在public下创建一个config.js文件文件里面写入：window.global_config = { BASE_URL: 'http://172.168.2.88:8080'}2.在public/index.html文件里引入这个config.js文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA
复制链接

扫一扫

专栏目录