Vue3项目直接运行的问题

cqwcns

我想做应该Vue应用，需求是无需搭建服务器支持，可以直接在电脑中单机运行（应用会发给其他人运行）。也可以上传多gitee做静态网页。


我尝试这样：
Vue3，通过CLI创建一个最简单的项目，通过npm run serve可以正常运行应用。
然后通过npm run build打包应用，输出dist。


这样直接打开index.html控制台会报错，找不到文件，然后将html中的引入文件路径由"/"改为"./"。
现在打开html就不报错了，也可以看到路由标签，但仍然无法正常运行，路由标签路径指向也是错的。


到这里就不知道如何解决了，于是查了一下某度，试了几个方法，不知道是不是vue版本的问题，最终还是没有成功。


所以，请教一下，如果我要直接运行build打包的dits，有什么方法实现。谢谢指教。

channg

安装个http-server  去dist目录运行一下

lxy9527

打包出来的文件只能运行在服务器吧。

Mr.[先知]

你得带上http-server

是小刘呀

建议用electron打包成exe  本地的话用绝对路径  不要用相对路径

hejian0301

[JavaScript] 纯文本查看 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '',
  transpileDependencies: true,
})

直接打开是file协议，在vue.config.js将publicPath设置为空即可

hejian0301

hejian0301 发表于 2022-7-26 16:52

[JavaScript] 纯文本查看 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports =  ...[/quote]

[mw_shl_code=javascript,true]
----------------------------分割线--52的代码块调不好！！！----------
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

补充：楼主使用了vue-router，使用hash模式可正常跳转路由

Mr.[先知]

有楼主说可以配置public是可以实现hash路由 没毛病
但是 会出现一些问题 坑多
还有楼主说用el打包exe 这个也是一个方向  但是 体积会很大的
还有选择使用aardio或者易语言 用miniblink这样的打包 会小一些 cef也可以

Mr.[先知]

可以用gitee的静态发布 不用购买服务器哦
也很方便

冒牌绅士

不能直接打开文件，需要使用nginx这种web服务器指定dist目录，通过启动的端口访问