Vue Cli3 Publicpath

Posted on  by admin
调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象:.
该对象将会被 webpack-merge 合并入最终的 webpack 配置。. 有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path;你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方,以确保所有的部分都能正常工作在一起。.
如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象:.
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。.
它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。.
当你打算链式访问特定的 loader 时,vue inspect 会非常有帮助。.
对于 CSS 相关 loader 来说,我们推荐使用 css.loaderOptions 而不是直接链式指定 loader。这是因为每种 CSS 文件类型都有多个规则,而 css.loaderOptions 可以确保你通过一个地方影响所有的规则。.
如果你想要替换一个已有的基础 loader,例如为内联的 SVG 文件使用 vue-svg-loader 而不是加载这个文件:.
你需要熟悉 webpack-chain 的 API 并阅读一些源码以便了解如何最大程度利用好这个选项,但是比起直接修改 webpack 配置,它的表达能力更强,也更为安全。.
比方说你想要将 index.html 默认的路径从 /Users/username/proj/public/index.html 改为 /Users/username/proj/app/templates/index.html。通过参考 html-webpack-plugin 你能看到一个可以传入的选项列表。我们可以在下列配置中传入一个新的模板路径来改变它:.
你可以通过接下来要讨论的工具 vue inspect 来确认变更。.
因为 @vue/cli-service 对 webpack 配置进行了抽象,所以理解配置中包含的东西会比较困难,尤其是当你打算自行对其调整的时候。.
vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的 vue 可执行程序同样提供了 inspect 命令,这个命令只是简单的把 vue-cli-service inspect 代理到了你的项目中。.
该命令会将解析出来的 webpack 配置、包括链式访问规则和插件的提示打印到 stdout。.
注意它输出的并不是一个有效的 webpack 配置文件,而是一个用于审查的被序列化的格式。.
有些外部工具可能需要通过一个文件访问解析好的 webpack 配置,比如那些需要提供 webpack 配置路径的 IDE 或 CLI。在这种情况下你可以使用如下路径:.
该文件会动态解析并输出 vue-cli-service 命令中使用的相同的 webpack 配置,包括那些来自插件甚至是你自定义的配置。.
如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分,那么你需要的仅仅是确保 Vue CLI 生成的构建文件在正确的位置,并遵循后端框架的发布方式即可。.
如果你独立于后端部署前端应用——也就是说后端暴露一个前端可访问的 API,然后前端实际上是纯静态应用。那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中,但要确保正确的 publicPath。.
dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve:.

三、打包时去除打印信息(console)

  • 如果你在 history 模式下使用 Vue Router,是无法搭配简单的静态文件服务器的。例如,如果你使用 Vue Router 为 /todos/42/ 定义了一个路由,开发服务器已经配置了相应的 localhost:3000/todos/42 响应,但是一个为生产环境构建架设的简单的静态服务器会返回 404。.
  • 为了解决这个问题,你需要配置生产环境服务器,将任何没有匹配到静态文件的请求回退到 index.html。Vue Router 的文档提供了常用服务器配置指引。.
  • 如果前端静态内容是部署在与后端 API 不同的域名上,你需要适当地配置 CORS。.
  • 如果你使用了 PWA 插件,那么应用必须架设在 HTTPS 上,这样 Service Worker 才能被正确注册。.
  • 云开发 CloudBase 是一个云原生一体化的 Serverless 云平台,支持静态网站、容器等多种托管能力,并提供简便的部署工具 CloudBase Framework) 来一键部署应用。.
CloudBase CLI 集成了 CloudBase Framework) 的能力,全局安装 CloudBase CLI 请运行以下命令:.
在项目根目录运行以下命令部署 Vue CLI 创建的应用,在部署之前可以先 开通环境.

平台指南 #

六、将版本号添加进打包的js名中

  • CloudBase CLI 首先跳转到控制台进行登录授权,然后将会交互式进行以下步骤.
  • 确认信息后会立即进行部署,部署完成后,可以获得一个自动 SSL,CDN 加速的网站应用,你也可以搭配使用 Github Action 来持续部署 Github 上的 Vue 应用。.
  • 除了部署一个纯静态的 Vue CLI 项目之外,还可以快速一键部署混合的全栈 Vue 应用:.
  • 使用 cloudbase init --template vue 快速创建和部署一个包含 Serverless 云函数后端的 Vue 应用.
  • 使用 cloudbase init --template nuxt-ssr 快速创建和部署一个包含 SSR 和 Serverless 云函数后端的 Vue 应用.
  • 详细信息请查看 CloudBase Framework 的部署项目示例.
  • 在 vue.config.js 中设置正确的 publicPath。.
  • 如果打算将项目部署到 https://.github.io/ 上, publicPath 将默认被设为 "/",你可以忽略这个参数。.
  • 如果打算将项目部署到 https://.github.io// 上 (即仓库地址为 https://github.com//),可将 publicPath 设为 "//"。举个例子,如果仓库名字为“my-project”,那么 vue.config.js 的内容应如下所示:.
  • 在项目目录下,创建内容如下的 deploy.sh (可以适当地取消注释) 并运行它以进行部署:.
  • 仿照上面在 vue.config.js 中设置正确的 publicPath。.
  • 安装 Travis CLI 客户端:gem install travis && travis --login.
  • 生成一个拥有“repo”权限的 GitHub 访问令牌。.
  • 授予 Travis 访问仓库的权限:travis set GITHUB_TOKEN=xxx (xxx 是第三步中的个人访问令牌).
  • 在项目根目录下创建一个 .travis.yml 文件。.
  • 将 .travis.yml 文件推送到仓库来触发第一次构建。.
  • 根据 GitLab Pages 文档的描述,所有的配置都在根目录中的.gitlab-ci.yml 文件中。下面的范例是一个很好的入门:.
  • 通常, 你的静态页面将托管在 https://yourUserName.gitlab.io/yourProjectName 上, 所以你可以创建一个 initial vue.config.js 文件去 更新 BASE_URL 要匹配的值 :.
  • 请阅读在 GitLab Pages domains 的文档来学习更多关于页面部署 URL 的信息。注意,你也可以使用自定义域名。.
  • 在推送到仓库之前提交 .gitlab-ci.yml 和 vue.config.js 文件。GitLab CI 的管道将会被触发: 当成功时候, 到 Settings > Pages 查看关于网站的链接。.

链式操作 (高级) #

  • 修改vue项目中 elementUI input边框样式

    With_Sunflower: 都不行啊

  • 使用SSM框架 实现登录、注册、分页和增删改操作

    Winson℡: 已经在博文啦

  • 使用SSM框架 实现登录、注册、分页和增删改操作

    fgjhfghjkff: 请问有源码吗

  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名

    ywq20200101: 上面没找到答案在下面找到了 果然还是得多看看评论

简单的配置方式 #

  • 在 Netlify 上,使用以下设置从 GitHub 创建新项目:.
  • 构建命令:npm run build 或 yarn build.
  • 也可以查看 vue-cli-plugin-netlify-lambda。.
  • 如果使用 Vue Router 的 history 模式,你需要在 /public 目录下创建一个 _redirects 文件:.
  • 详细信息请查看 Netlify 重定向文档。.

四、配置全局jQuery

通用指南 #