web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

vue项目通过打包命令参数,配置子目录

505 ℃
     

需求:根据不同的部署环境需求打包不同的基础路径,需要配置的地方有很多,每个不同路径都要重新修改一边,太麻烦了!

效果:通过执行的命令 npm run build routerbase=wap 修改路由基础路径 /wap/

build 指令如下:

"scripts": {
    "build": "node build/build.js",
},

开始配置

1、获取命令行输入参数,并且配置环境变量 NODE_ENV_RBase

创建 build/routerbase.js

/ process.argv 获取命令行命令数组,['node.exe路径','build.js路径', 'routerbase=wap']
module.exports = function () {
  process.argv.forEach((val, index) => {
    if (val.indexOf('routerbase=') === 0) {
      const routerbase = val.split('=')[1]
      if (routerbase) {
        process.env.NODE_ENV_RBase = `/${routerbase}/`
      } else {
        process.env.NODE_ENV_RBase = '/'
      }
      console.log(`> router base "${process.env.NODE_ENV_RBase}"`,)
    }
  });
}

2、在 build/build.js 引用 routerbase.js

// 引入并执行,放在文件顶部优先引入
require('./routerbase.js')()

3、环境变量 NODE_ENV_RBase 的配置

Router base 的基础路径

// src/router/index.js
const createRouter = () => new Router({
  base: process.env.NODE_ENV_RBase || '/',
  mode: "history",
  scrollBehavior: () => ({ y: 0 }),
  routes
})

打包时的基础路径 config.build.assetsPublicPath

// config/index.js
build: {
  assetsPublicPath: process.env.NODE_ENV_RBase
}

index.html 页面引入的放在 static 的文件基础路径

index.html 的路径配置需要通过 htmlWebpackPlugin 的模板配置

1、定义一个变量 rootPath: config.build.assetsPublicPath,

2、在 index.html 通过模板语法引用 <%=htmlWebpackPlugin.options.rootPath%> 替换之前的 /wap/

// build/webpack.prod.conf.js
new HtmlWebpackPlugin({
  ...
  rootPath: config.build.assetsPublicPath,
  ...
}),

...
<script type="text/javascript" src="<%=htmlWebpackPlugin.options.rootPath%>static/js/xxx.js"></script>
...

4、配置完成

执行 npm run build routerbase=wap 即可给打包的项目加上 /wap/ 基础路径

webpack中可以打包html资源吗?

Vuejs打包后部署到子目录下路径问题解决方法

Vue-Router用createRouter创建路由去除#

vuejs打包上传宝塔页面显示404解决方法

dedecms安装到子目录,如何把uploads默认在根目录

标签: createRouter, 命令参数, 子目录, 打包

上面是“vue项目通过打包命令参数,配置子目录”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2134.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计1468个字,预计阅读时长10分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款由字制区设计团队的免费综艺字体——字制区喜脉体
下一篇: 推荐一款免费开源的跨平台MarkDown编辑器——Mark Text
x 打工人ai神器