nuxt静态部署打包相对路径操作

以往在nuxt项目中，打包静态化部署的的文件如下：

路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。

nuxt不同于vue项目，思索了许久，终于找到了配置的地方：

nuxt项目中 nuxt.config.js ：

module.exports = {
 router: {
   base: './'
 }
}

打包后的文件：

补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题

nuxt静态部署问题

静态部署：路由模式跳转失效的问题；不能使用历史模式，需要使用 ‘hash' 模式，再进行打包 ‘npm run generate'

文件:nuxt.config.js

// 自定义配置路由
router: {
  mode: 'hash', // 使用 'hash' 主要是为了适配以相对路径打开的静态站点， 必须使用 'hash' 否则路由跳转不生效
  // base: '/moli/',
  base: process.env.NODE_ENV === 'production' ? './' : '/', // 使用 './' 主要是为了适配以相对路径打开的静态站点
  extendRoutes(routes, resolve) {
   routes.push({
    path: '/',
    redirect: {
     name: 'home'
    }
   })
  }
 },

以上这篇nuxt静态部署打包相对路径操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈nuxtjs校验登录中间件和混入(mixin)

    middleware - authLogin.js export default function ({ route, store, redirect, app, req, res }) { // store.state.auth.loggedIn 是否登录 // 权限页面检查登录状态 if (!store.state.auth.loggedIn) { store.commit('changeShowType', 'login'); // 展示登录框或者可以跳转登录页 const query =

  • Nuxt.js 静态资源和打包的操作

    直接引入图片 我们在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用. <div <img src="~static/logo.png"></div> 这时候在npm run dev 下是完全正常的,那我们看一下打包. 打包静态HTML并运行 用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,进行运行. 在终端中输入: npm run generate 然后在dist文件夹下输入live-serve

  • 解决nuxt页面中mounted、created、watch执行两遍的问题

    前言: 在开发中偶然检查Network请求的时候发现,在页面中created钩子函数中请求了一个接口,但是页面这个页面加载的时候,接口会连续请求两边,然后我就排查是否有其他地方调用了同样的接口,检查了好几遍后发现并没有,WTF,然后我在created中打印了一下,惊奇的发现...created会执行两次打印... WTF.WTF.WTF,小朋友你是否有很多问号???,然后试了下,不光created会执行两遍,mounted也行,就连watch里面监听的也会,握草(草是一种植物),此处省略我咔咔排

  • nuxt.js添加环境变量,区分项目打包环境操作

    最近由于业务需求,开发了一个nuxt.js项目. 配置打包环境变量时,发现nuxt.js的文档过于简单,无法做参照. 经查证了一些资料后,解决了该问题.遂整理成文档,发布于此,给同行一些参照. 一.添加cross-env插件 npm npm i cross-env yarn yarn add cross-env 二.添加环境变量文件 根目录添加env.production NODE_ENV = 'production' VUE_APP_TITLE = 'production' 根目录添加env.

  • nuxt.js 在middleware(中间件)中实现路由鉴权操作

    路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问. 一般我是通过判断cookie中存储的token来判断的. 在middleware文件夹下新建"auth.js"的文件 在当前auth.js文件内判断cookie中是否包含token字段 import getCookie from '~/utils/getCookie' export default function ({route, req, res, redirect}) { let isClient = process.cl

  • nuxt静态部署打包相对路径操作

    以往在nuxt项目中,打包静态化部署的的文件如下: 路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了. nuxt不同于vue项目,思索了许久,终于找到了配置的地方: nuxt项目中 nuxt.config.js : module.exports = { router: { base: './' } } 打包后的文件: 补充知识:nginx部署,nuxt静态部署,路由跳转失效的问题 nuxt静态部署问题 静态部署:路由模式跳转失效的问题:不能使用历史模式,需要使用 'hash

  • nuxt+axios实现打包后动态修改请求地址的方法

    需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译. 这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包.功能不变时,单单是修改一下请求地址省了不少功夫. 1.开始 把需要动态修改的配置写在一个配置json文件里面.该配置文件可以放在static目录下: 静态文件目录:静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理. 服务器启动的时候,该目录下的文件会映

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • 详解vue静态资源打包中的坑与解决方案

    本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题. 1.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用

  • 使用docker -v 和 Publish over SSH插件实现war包自动部署到docker的操作步骤

    上篇文章在docker容器挂载宿主主机目录 中介绍了运行docker时的一个重要命令 -v sudo docker run -p 8822:8080 --name tomcat_xiao_volume -v /home/xiaochangwei/test:/usr/local/tomcat/webapps xiaochangwei/tomcat:v1 将容器内部目录和宿主主机目录进行关联,这样操作宿主主机关联目录时,就会同步关联操作了容器对应目录, 这在发布war包时尤其有用, 容器启动后就无需

  • Spring实战之使用静态工厂方法创建Bean操作示例

    本文实例讲述了Spring实战之使用静态工厂方法创建Bean操作.分享给大家供大家参考,具体如下: 一 配置 <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans" x

  • 浅谈Vue 自动化部署打包上线

    应用场景 项目打包后发布到正式环境,需要后端配合或者前端自己上传到服务器上,操作不便且容易产生问题,比如后台不在的情况而前台没有服务器的信息,这时发布就被延:或者前端自己上传容易导致误操作,如果上传错地方没正确上传都可能导致线上直接崩掉,而这对于已发布的产品而言是致命的.因此,有必要实现自动化部署代码到线上,解放双手的同时也减轻后端兄弟的压力. 项目使用 1.在项目根目录下, 创建 deploy/products.js 文件 /* *读取env环境变量 */ const SERVER_ID =

  • Nuxt.js的路由跳转操作(页面跳转nuxt-link)

    路由跳转代码如下: <ul> <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li> <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li> <li><nuxt-link :to="

  • 使用vue-cli3打包dist路径问题修改打包配置

    目录 在vue.config.js目录下配置 vue-cli3打包注意路径的问题 在vue.config.js目录下配置 module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.did

  • Node获取pnpm安装的包源码及代码路径操作

    Node获取pnpm安装的包源码及代码路径操作

    目录 前言 举个研发例子 问题聚焦 姿势 demo 前言 在改造老工程的包依赖管理的时候,有时候我们想引入一些社区比较好用的包管理:有时候一些阻塞点会阻拦我们,特别我们构建流程可能会拷贝node_modules包源码的行为: 举个研发例子 不同公司的CLI因为面对的业务场景和构建场景不一样,有些时候,我们会做一些差异化的特性,比如工程前端CLI有暴露代码映射拷贝行为,就是打包的时候会把node_modules下的某些包的资源拷贝到特定路径,用于后续其他处理 // 本地调试 editor 时需要打

随机推荐