精华内容
下载资源
问答
  • 专业订制设计包装企业网站html静态模板
  • 别墅装饰公司企业网站html静态模板
  • 多语言汽车轴承配件企业网站html静态模板
  • 火锅家具定制企业网站html静态前端模板
  • 我想在 js 中获取一个静态文件,使用上面的写法我获取不到。我尝试了很多路径书写方式,试过绝对路径,相对路径,@ 等,但是,都不行,我的 loadJSON() 是在同级目录下的一个文件中的方法,其代码为function load...

    7ce6ca653f690ede4816289840bc0dcb.png

    我想在 js 中获取一个静态文件,使用上面的写法我获取不到。

    我尝试了很多路径书写方式,试过绝对路径,相对路径,@ 等,但是,都不行,我的 loadJSON() 是在同级目录下的一个文件中的方法,其代码为

    function loadJSON(filename, callback) {

    var xobj = new XMLHttpRequest();

    xobj.overrideMimeType("application/json");

    xobj.open('GET', filename, true);

    xobj.onreadystatechange = function () {

    if (xobj.readyState == 4 && xobj.status == "200") {

    callback(xobj.responseText);

    }

    };

    xobj.send(null);

    }

    并且,在上面代码中 response 的内容为

    traditionalchina

    回答

    ‘@/assets/….’

    路径没写对

    ../../../../asset/

    使用require,并且是相对路径

    0103689bd3c152f4fee33e234ade2c16.png

    展开全文
  • 初始化并绑定vue首先在自己的网页body内添加一个div包括所有内容,并给这个div设置id如:Document//你的html代码3.创建vue并挂载到页面(如果在单独创建js文件来写,则需在htmll中引入这个js文件)创建如下:window....

    看完觉得有用记得给个赞奥,你的赞就是我的动力

    1.引入vue,引入jQuery(因为等下用Ajax请求数据用到jQuery)

    如:

    2.初始化并绑定vue

    首先在自己的网页body内添加一个div包括所有内容,并给这个div设置id

    如:

    Document

    //你的html代码

    3.创建vue并挂载到页面(如果在单独创建js文件来写,则需在htmll中引入这个js文件)

    创建如下:

    window.onload = function() {

    new Vue({

    el: "#app",//将vue挂载到html中你创建的那个带id="app"上

    data: {

    aboutData: [], //建一个空数组,用来保存调用接口获取的数据

    },

    created: function() {

    this.getRoute();

    },

    mounted() {

    },

    methods: {

    getRoute: function() {

    var that = this;

    $.ajax({

    type: "GET",

    url:

    "填写你的数据接口地址",

    dataType: "json",

    success: function(response) {

    aboutData = response;

    //写在获取数据成功后你想进行的操作

    },

    error: function() {

    alert("请求失败");

    }

    });

    }

    });

    };

    4.可以在html代码中调用vue相关语法来写进动态数据了

    看完觉得有用记得给个赞奥,你的赞就是我的动力

    展开全文
  • VuePress – Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目...
  • 由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建...2.、在html文件下,使用标签进入 3、在页面直接按照原生的方法使用即可。 例如config.js定
  • vue生成静态js文件by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website with Vue.js in no time) You have decided to build a static site, but where ...

    vue生成静态js文件

    by Ondřej Polesný

    通过OndřejPolesný

    如何立即使用Vue.js生成静态网站 (How to generate a static website with Vue.js in no time)

    You have decided to build a static site, but where do you start? How do you select the right tool for the job without previous experience? How can you ensure that you succeed the first time, while avoiding tools that won’t help you in the end?

    您已决定建立一个静态站点,但是从哪里开始呢? 您如何在没有经验的情况下为工作选择合适的工具? 您如何才能确保第一次成功,同时避免使用最终无法帮助您的工具?

    In this article, you will learn how to adjust a Vue.js website to be automatically generated as a static site.

    在本文中,您将学习如何将Vue.js网站调整为自动生成为静态网站。

    介绍 (Introduction)

    I summarized the key differences between an API based website and static sites in my previous article. As a quick reminder, static sites are:

    上一篇文章中,我总结了基于API的网站与静态网站之间的主要区别。 快速提醒一下,静态网站是:

    • Blazing fast

      快速燃烧
    • Secure (as they are just a set of static pages)

      安全(因为它们只是一组静态页面)
    • Regenerated every time editors update the content

      每次编辑者更新内容时都会重新生成
    • Compatible with additional dynamic functionality

      与其他动态功能兼容

    什么是静态网站生成器? (What is a Static Site Generator?)

    A static site generator is a tool that generates a static website from a website’s implementation and content.

    静态网站生成器是一种根据网站的实现和内容生成静态网站的工具。

    Content can come from a headless content management system, through a REST API. The website implementation uses one of the JavaScript frameworks like Vue.js or React. The output of a static site generator is a set of static files that form the website.

    内容可以通过REST API来自无头内容管理系统。 该网站实现使用JavaScript框架之一,例如Vue.js或React。 静态网站生成器的输出是构成网站的一组静态文件。

    静态网站实施 (Static Site Implementation)

    I chose Vue.js as the JavaScript framework to use. Therefore I will be working with Nuxt.js, which is a static site generator for Vue.js.

    我选择Vue.js作为要使用JavaScript框架。 因此,我将使用Nuxt.js ,它是Vue.js的静态站点生成器。

    If you are using a different framework, look for a static site generator built on top of that framework (for example Gatsby for React.js).

    如果您使用其他框架,请寻找在该框架之上构建的静态站点生成器(例如Gatsby for React.js )。

    Essentially, Nuxt is a combination of multiple tools that together enable you to create static sites. The tools include:

    本质上,Nuxt是多个工具的组合,可以使您一起创建静态站点。 这些工具包括:

    • Vue2 — Core Vue.js library.

      Vue2 —核心Vue.js库。
    • Vue Router — Handles URL routing for pages within the website.

      Vue路由器-处理网站内页面的URL路由。
    • Vuex — Memory store for data that are shared by components.

      Vuex-内存存储区,用于共享组件。
    • Vue Server Renderer — Enables server side rendering of pages before the actual static files generation

      Vue Server Renderer —在实际生成静态文件之前启用页面的服务器端渲染
    • Vue-Meta — Manages page metadata info

      Vue-Meta —管理页面元数据信息

    Nuxt also defines how the website needs to be built in order to generate static files.

    Nuxt还定义了如何构建网站以生成静态文件。

    安装 (Installation)

    In order to start building websites with Nuxt, you need to install it. See detailed installation instructions on the Nuxt.js webpage. In a nutshell, you need npx (shipped with NPM by default) installed and run:

    为了开始使用Nuxt建立网站,您需要安装它。 请参阅Nuxt.js网页上的详细安装说明。 简而言之,您需要安装npx (默认情况下附带NPM)并运行:

    npx create-nuxt-app <website-name>

    You can just use default selections, unless you have preferences otherwise.

    您可以仅使用默认选择,除非另有选择。

    组件 (Components)

    In one of my previous articles I explained how to create a template layout and components. All of them were defined within single file components.js. That needs to be changed with Nuxt. All components need to be extracted from components.js file into separate files under folder components. Take a look at my blog-list component and its previous implementation:

    我以前的一篇文章中,我解释了如何创建模板布局和组件。 所有这些都在单个文件components.js中定义。 这需要通过Nuxt进行更改。 所有组件都需要从components.js文件中提取到文件夹components下的单独文件中。 看一下我的blog-list组件及其先前的实现:

    Vue.component('blog-list', { props: ['limit'], data: function(){  return {   articles: null  } },
    created: function(){  var query = deliveryClient   .items()   .type('blog_post')   .elementsParameter(['link', 'title', 'image_url', 'image', 'teaser'])   .orderParameter('elements.published', SortOrder.desc);   if (this.limit){   query = query.limitParameter(this.limit);  }  query   .getPromise()   .then(response =>    this.$data.articles = response.items.map(item => ({     url: item.link.value,     header: item.title.value,     image: item.image_url.value != '' ? item.image_url.value : item.image.assets[0].url,     teaser: item.teaser.value    }))   ); },
    template: `  <section class="features">   <article v-for="article in articles">    ...   </article>  </section> ` });

    To separate it, you also need to change the component’s syntax to match the following template:

    要分离它,您还需要更改组件的语法以匹配以下模板:

    <template> HTML of the component</template><script> export default {  Vue.js code }</script>

    Therefore my adjusted Blog-list component looks like this:

    因此,我调整后的Blog-list组件如下所示:

    <template> <section class="features">  <article v-for="article in blogPosts">   ...  </article> </section></template><script> export default {  props: ['limit'],  computed: {   blogPosts: function(){    return this.$store.state.blogPosts && this.limit && this.$store.state.blogPosts.length > this.limit ? this.$store.state.blogPosts.slice(0, this.limit) : this.$store.state.blogPosts;   }  } }</script>

    You see the template stayed the same. What changed is the implementation that is now within export default section. Also, there used to be a function gathering data from headless CMS Kentico Cloud.

    您会看到模板保持不变。 更改的是export default部分中的实现。 此外,过去还存在从无头CMS Kentico Cloud收集数据的功能。

    That content is now stored within Vuex store. I will explain this part later. Convert all of your components this way, to contain template within <template> tags and implementation within &lt;script> tags. You should end up with a similar file structure as I have:

    该内容现在存储在Vuex商店中。 我将在后面解释这部分。 以此方式转换所有组件,以将模板包含在<templa te>标记内,并在ithin &l t; script>标记内实现。 您应该最终得到与我类似的文件结构:

    Note that I have two new components here — Menu and Header. As my aim was to also improve performance, I decided to remove jQuery from my website. jQuery is quite a large and heavy library that was used only for small UI effects. I was able to recreate them using just Vue.js. Therefore, I converted the static HTML representing header to component. I also added the UI related functionality into mounted function of this component.

    请注意,这里有两个新组件-菜单和标题。 因为我的目的还在于提高性能,所以我决定从我的网站中删除jQuery。 jQuery是一个庞大而笨重的库,仅用于小型UI效果。 我只用Vue.js就可以重新创建它们。 因此,我将静态HTML表示头转换为组件。 我还将与UI相关的功能添加到此组件的已mounted功能中。

    mounted: function(){ window.addEventListener(‘scroll’, this.scroll); …},methods: { scroll: function(){  … }}

    使用Nuxt处理Vue.js事件 (Handling Vue.js Events with Nuxt)

    I used to leverage Vue events in my website. The main reason was reCaptcha control used for form validation. When it was initialized, it would broadcast the event so that form component can unlock the submit button of the contact form.

    我曾经在网站上利用Vue事件。 主要原因是reCaptcha控件用于表单验证。 初始化后,它将广播事件,以便表单组件可以解锁联系表单的提交按钮。

    With Nuxt, I no longer use app.js or components.js files. Therefore I created a new recaptcha.js file that contains a simple function emitting the event when reCaptcha gets ready. Note that instead of creating new Vue.js instance just for events (let bus = new Vue(); in my old code), it is possible to simply use this.$nuxt the same way.

    使用Nuxt,我不再使用app.jscomponents.js文件。 因此,我创建了一个新的recaptcha.js文件,其中包含一个简单的函数,当reCaptcha准备就绪时会发出事件。 请注意,与其仅为事件创建新的Vue.js实例let bus = new Vue();在我的旧代码中为let bus = new Vue(); ),还可以以相同的方式简单地使用this.$nuxt

    var recaptchaLoaded = function(){ this.$nuxt.$emit('recaptchaLoaded');}

    布局和页面 (Layout and Pages)

    The main frame of the page was index.html, and each page defined its own layout in constants that were handed over to Vue router.

    页面的主要框架是index.html ,每个页面都以常量定义了自己的布局,这些常量被移交给Vue路由器。

    With Nuxt, the main frame including <html> tag, meta tags and other essentials of any HTML page are handled by Nuxt. The actual website implementation is handling only content within <body> tags. Move the layout that is common for all your pages into layouts/default.vue and respect the same template as with components. My layout looks like this:

    使用Nuxt,包括<ht ml> tag ,meta标签和任何HTML页面的其他要素的主框架都由Nuxt处理。 实际的网站实现仅处理量w ithin <body>标记。 将所有pages into layouts通用的布局移动pages into layouts /default.vue中,并使用与组件相同的模板。 我的布局如下所示:

    <template> <div>  <Menu></Menu>  <div id="page-wrapper">   <Header></Header>   <nuxt/>   <section id="footer">    <div class="inner">     …     <ContactForm></ContactForm>     …    </div>   </section>  </div> </div></template><script> import ContactForm from ‘~/components/Contact-form.vue’ import Menu from ‘~/components/Menu.vue’ import Header from ‘~/components/Header.vue’  export default {  components: {   ContactForm,   Menu,   Header  } } </script>

    The layout is basically the HTML markup of my old index.html. However, note the <script> section. All of the components I want to use within this layout template need to be imported from their location and specified in exported object.

    布局基本上是我的旧index.htmlHTML标记。 但是,请注意<scri pt>部分。 我要在此布局模板中使用的所有组件都需要从其位置导入,并在导出的对象中指定。

    Page components were previously defined in app.js as constants. Take a look at my old Home page for example:

    页面组件先前在app.js定义为常量。 以我的旧主页为例:

    const Home = { template: `  <div>   <banner></banner>   <section id="wrapper">    <about-overview></about-overview>    ...    <blog-list limit="4"></blog-list>    <ul class="actions">     <li><a href="/blog" class="button">See all</a></li>    </ul>    ...   </section>  </div> `}

    All these pages need to be defined in separate files within pages folder. Main page is always called index.vue. This is how my new pages/index.vue (my Homepage) looks like:

    所有这些页面都需要在pages文件夹内的单独文件中定义。 主页始终称为index.vue 。 这是我的新pages/index.vue (我的主页)的样子:

    <template> <div>  <Banner></Banner>  <section id="wrapper">   <AboutOverview></AboutOverview>   ...   <BlogList limit="4"></BlogList>   <ul class="actions">    <li><a href="/blog" class="button">See all</a></li>   </ul>   ...  </section> </div></template><script> import Banner from ‘~/components/Banner.vue’ import AboutOverview from ‘~/components/About-overview.vue’ import BlogList from ‘~/components/Blog-list.vue’  export default {  components: {   Banner,   AboutOverview,   BlogList  }, }</script>

    资产存放地点 (Where to Store Assets)

    On every website there are assets like CSS stylesheets, images, logos, and JavaScripts. With Nuxt, all these static files need to be stored under folder static. So the folder structure currently looks like this:

    每个网站上都有CSS样式表,图像,徽标和JavaScript等资产。 使用Nuxt,所有这些静态文件都需要存储在文件夹static下。 因此,文件夹结构当前如下所示:

    When you reference any resources from CSS stylesheets like fonts or images, you need to use static folder as a root:

    当您引用CSS样式表中的任何资源(如字体或图像)时,您需要使用静态文件夹作为根目录:

    background-image: url("~/assets/images/bg.jpg");

    获取内容 (Getting Content)

    With all the components and pages in place, we finally get to it: getting content into components.

    在所有组件和页面就绪之后,我们终于可以实现:将内容添加到组件中。

    Getting content using Nuxt is a bit different than it used to be. The important aspect of this process when using a static site generator is that the content needs to be gathered before all the pages are generated. Otherwise you will end up with a static website, but requests for content would still be dynamic, hitting the headless CMS from each visitor’s browser and you would lose the main benefit.

    使用Nuxt获取内容与以前有所不同。 使用静态站点生成器时,此过程的重要方面是,在生成所有页面之前需要收集内容。 否则,您最终将获得一个静态网站,但对内容的请求仍将是动态的,从而使每个访问者的浏览器都无法访问CMS,您将失去主要的好处。

    Nuxt contains two special methods that handle asynchronous data fetching at the right time, that is before the pages are generated. These methods are asyncData and fetch. They are available only to page components (that is files within pages folder) and their purpose is the same, but asyncData will automatically store received data within the component dataset.

    Nuxt包含两个特殊方法,这些方法在正确的时间(即生成页面之前)处理异步数据获取。 这些方法是asyncDatafetch 。 它们仅对页面组件(即pages文件夹中的文件)可用,并且用途相同,但是asyncData会自动将接收到的数据存储在组件数据集中。

    This can be beneficial if you have many components on a single page using the same set of data. In my case, I even have multiple pages with many components that need to share the same data. Therefore I would either need to request the same data on each page or use a shared space that all pages and components could access.

    如果您在一个页面上使用相同数据集的多个组件,这将是有益的。 就我而言,我什至有多个页面,其中包含需要共享同一数据的许多组件。 因此,我要么需要在每个页面上请求相同的数据,要么使用所有页面和组件都可以访问的共享空间。

    I chose the latter. Nuxt makes it very easy for us. It automatically includes Vuex store that enables our components and pages access any data that are within the store. To start using the store all you need to do is create an index.js file within the store folder.

    我选择了后者。 Nuxt对我们来说非常容易。 它会自动包含Vuex存储,这使我们的组件和页面可以访问存储中的任何数据。 要开始使用商店,您需要做的就是在store文件夹中创建一个index.js文件。

    import Vuex from 'vuex'
    const createStore = () => { return new Vuex.Store({  state: () => ({}),  mutations: {},  actions: {}, })}export default createStore

    You see the instance has a few properties:

    您会看到实例具有一些属性:

    • State

      State is similar to data in components. It contains definition of data fields that are used to store data.

      状态类似于组件中的数据。 它包含用于存储数据的数据字段的定义。

    • Mutations

      变异

      Mutation are special functions that are permitted to change data in State (mutate the state).

      突变是允许在状态(突变状态)中更改数据的特殊功能。

    • Actions

      动作

      Actions are simple methods that enable you to, for example, implement content gathering logic.

      动作是简单的方法,使您能够例如执行内容收集逻辑。

    Let’s get back to the Blog-list component. This component needs an array of blog posts in order to render its markup. Therefore blog posts need to be stored within Vuex store:

    让我们回到Blog-list组件。 该组件需要一系列博客文章才能呈现其标记。 因此,博客文章需要存储在Vuex商店中:

    …const createStore = () => { return new Vuex.Store({  state: () => ({   blogPosts: null  }),  mutations: {   setBlogPosts(state, blogPosts){    state.blogPosts = blogPosts;   }  },  actions: {   getBlogPosts (context) {    logic to get content from Kentico Cloud   }  }, })}

    After adjusting Vuex store this way, the Blog-list component can use its data:

    以这种方式调整Vuex存储后, Blog-list组件可以使用其数据:

    <article v-for="article in $store.state.blogPosts"> …</article>

    I already shared the whole implementation of this component above. If you noticed, it uses computed function as a middle layer between component markup and Vuex store. That middle layer ensures the component displays only a specific amount of articles as configured in the limit field.

    我已经在上面共享了此组件的整个实现。 如果您注意到了,它将computed功能用作组件标记和Vuex存储之间的中间层。 中间层可确保组件仅显示特定数量的商品,如在“ limit字段中配置的那样。

    查询无头CMS (Querying the Headless CMS)

    Maybe you remember the deliveryClient was used to get data from Kentico Cloud into the components.

    也许您还记得deliveryClient用于将数据从Kentico Cloud获取到组件中。

    Disclaimer: I work for Kentico, a CMS vendor that provides both traditional (coupled) CMS and a new cloud-first headless CMS — Kentico Cloud.

    免责声明:我为Kentico工作,该公司是CMS供应商,既提供传统(耦合)CMS,又提供新的云计算式无头CMS-Kentico Cloud。

    The very same logic can be used here in the Vuex store actions with a little tweak. Kentico Cloud has a module for Nuxt.js, install it using following command:

    只需稍作调整,即可在Vuex存储操作中使用完全相同的逻辑。 Kentico Cloud具有适用于Nuxt.js模块 ,请使用以下命令进行安装:

    npm i kenticocloud-nuxt-module — savenpm i rxjs — save

    With this module you can keep using deliveryClient like before, just with a $ prefix. So in my case the logic to get blog posts looks like this:

    使用此模块,您可以像以前一样继续使用deliveryClient ,只是带有$前缀。 因此,就我而言,获取博客帖子的逻辑如下:

    …getBlogPosts (context) { return this.$deliveryClient  .items()  ...  .orderParameter('elements.published', SortOrder.desc)  .getPromise()  .then(response => {   context.commit('setBlogPosts', response.items.map(item => ({    url: item.link.value,    header: item.title.value,    image: item.image_url.value != '' ? item.image_url.value : item.image.assets[0].url,    teaser: item.teaser.value   })))  }); },…

    If you want to use ordering using the orderParameter, you may need to include another import in the store/index.js file:

    如果要使用orderParameter使用订购,则可能需要在store/index.js文件中包括另一个导入:

    import { SortOrder } from 'kentico-cloud-delivery'

    Now when the content gathering logic is implemented, it’s time to use the special asynchronous function fetch that I mentioned before. See my implementation in the index.vue page:

    现在,当实现内容收集逻辑时,该使用我前面提到的特殊异步函数提取了。 请参阅index.vue页面中的实现:

    async fetch ({store, params}) { await store.dispatch('getBlogPosts')}

    The call to store.dispatch automatically invokes getBlogPosts action. Within the getBlogPosts implementation note the call for context.commit. context refers to Vuex store and commit will hand over blog posts data to setBlogPosts mutation. Updating the data set with blog posts changes the state of the store (mutates it). And we are almost finished!

    调用store.dispatch自动调用getBlogPosts操作。 在getBlogPosts实现中,请注意对context.commit的调用。 context是指Vuex存储,并且commit会将博客帖子数据setBlogPostssetBlogPosts突变。 用博客文章更新数据集会更改商店的状态(对其进行突变)。 我们快完成了!

    其他内容存储选项 (Other content storage options)

    I used Kentico Cloud headless CMS and its API here, as I am using it throughout all articles in this series. If you want to also check out other options, you can find an independent list of headless CMSs and their features at headlesscms.org.

    我在这里使用了Kentico Cloud无头CMS及其API,因为我在本系列的所有文章中都使用了它。 如果你也想看看其他的选择,你可以找到无头的CMS和他们的特征,在一个独立的名单headlesscms.org

    If you don’t want to use a headless CMS and its API, you may decide to store your content in some other way — usually as a set of markdown files directly stored within your project or Git repository. You can find a nice example of this approach in nuxt-markdown-example GitHub repository.

    如果您不想使用无头CMS及其API,则可以决定以其他方式存储内容-通常作为一组直接存储在项目或Git存储库中的markdown文件。 您可以在nuxt-markdown-example GitHub存储库中找到这种方法的一个很好的示例。

    Nuxt配置 (Nuxt Configuration)

    The whole application needs to be properly configured using Nuxt.config.js file. This file contains information about used modules, their configuration and site essentials like title or SEO tags. The configuration of my website looks like this:

    需要使用Nuxt.config.js文件正确配置整个应用程序。 该文件包含有关使用的模块,它们的配置和站点必不可少的信息,例如标题或SEO标签。 我的网站的配置如下所示:

    export default { head: {  title: 'Ondrej Polesny',  meta: [   { charset: 'utf-8' },   ...   { hid: 'description', name: 'description', content: 'Ondrej Polesny — Developer Evangelist + dog lover + freelance bus driver' }  ],  script: [   { src: 'https://www.google.com/recaptcha/api.js?onload=recaptchaLoaded', type: "text/javascript" },   { src: 'assets/js/recaptcha.js', type: "text/javascript" }  ], }, modules: [  'kenticocloud-nuxt-module' ], kenticocloud: {  projectId: '*KenticoCloud projectId*',  enableAdvancedLogging: false,  previewApiKey: '' }, css: [  {src: 'static/assets/css/main.css'}, ], build: {  extractCSS: {   allChunks: true  } }}

    The head section describes website essentials like title and meta tags you want to include in header.

    头部分描述了网站要领,例如要包含在标题中的titlemeta标记。

    Note the modules and kenticocloud configuration. The first one lists all modules your application depends on and the second one is specific module configuration. This is the place where you need to put your project API key.

    注意moduleskenticocloud配置。 第一个列出了应用程序依赖的所有模块,第二个列出了特定的模块配置。 这是您需要放置项目API密钥的地方。

    To see all the options for meta tags, please refer to https://github.com/declandewet/vue-meta

    要查看元标记的所有选项,请参阅https://github.com/declandewet/vue-meta

    运行并生成 (Running and Generating)

    Static sites need to be generated before anyone can access them or upload them to an FTP server. However, it would be very time consuming to regenerate the site every single time a change has been made during the development phase. Therefore, you can run the application locally using:

    在任何人都可以访问静态站点或将其上传到FTP服务器之前,需要生成静态站点。 但是,在开发阶段中每次进行更改都会重新生成站点,这将非常耗时。 因此,您可以使用以下命令在本地运行该应用程序:

    npm run dev

    This will create a development server for you and enable you to access your website on http://localhost:8000 (or similar). While you keep your console running this command, every change you make in your scripts will have immediate effect on the website.

    这将为您创建一个开发服务器,并使您能够访问http:// localhost:8000(或类似地址)上的网站。 在保持控制台运行此命令的同时,您对脚本所做的每项更改都将立即对网站生效。

    To generate a true static site, execute following command:

    要生成一个真正的静态站点,请执行以下命令:

    npx nuxt generate

    The output, that is your static site, will be in dist folder. Feel free to open any page in your favorite text editor and see if the source code contains content from the headless CMS. If it does, it was successfully fetched.

    输出,即您的静态站点,将位于dist文件夹中。 随时在您喜欢的文本编辑器中打开任何页面,并查看源代码是否包含无头CMS的内容。 如果是这样,则说明已成功获取。

    结论 (Conclusion)

    Having a generated static site will greatly improve the website’s performance. Compared to traditional sites, the webserver does not need to perform any CPU heavy operations. It only serves static files.

    具有一个生成的静态网站将大大提高网站的性能。 与传统站点相比,Web服务器不需要执行任何CPU繁重的操作。 它仅提供静态文件。

    Compared to API based websites, the clients receive requested data instantly with the very first response. That’s what makes them all that fast — they do not need to wait for external content to be delivered via additional asynchronous requests. The content is already there in the first response from the server. That dramatically improves user experience.

    与基于API的网站相比,客户端会在第一响应中立即收到请求的数据。 这就是使它们如此快速的原因-他们无需等待通过其他异步请求传递外部内容。 服务器的第一响应中已经存在该内容。 这极大地改善了用户体验。

    Converting the site from Vue.js implementation to Nuxt definitions is very straightforward and does not require deep knowledge of all used components and packages.

    将网站从Vue.js实现转换为Nuxt定义非常简单,并且不需要对所有使用的组件和软件包有深入的了解。

    Have you successfully created your first static site? Have you experienced any struggles? Please leave a comment.

    您是否成功创建了第一个静态网站? 你经历过任何挣扎吗? 请发表评论。

    In the next article I will focus on automated regeneration of static sites and where to host them, so stay tuned.

    在下一篇文章中,我将重点介绍静态站点的自动再生以及在何处托管静态站点,请继续关注。

    1. How to start creating an impressive website for the first time

      如何首次开始创建令人印象深刻的网站

    2. How to decide on the best technology for your website?

      如何为您的网站选择最佳技术?

    3. How to power up your website with Vue.js and minimal effort

      如何通过Vue.js和最少的精力为您的网站加电

    4. How to Mix Headless CMS with a Vue.js Website and Pay Zero

      如何将无头CMS与Vue.js网站混合并支付零费用

    5. How to Make Form Submissions Secure on an API Website

      如何在API网站上确保表单提交的安全

    6. Building a super-fast and secure website with a CMS is no big deal. Or is it?

      用CMS构建超快速,安全的网站没什么大不了的。 还是?

    7. How to generate a static website with Vue.js in no time

      如何立即使用Vue.js生成静态网站

    8. How to quickly set up a build process for a static site

      如何快速设置静态站点的构建过程

    翻译自: https://www.freecodecamp.org/news/how-to-generate-a-static-website-with-vue-js-in-no-time-e74e7073b7b8/

    vue生成静态js文件

    展开全文
  • vue static静态文件怎么引用src中的文件!!!!!!!
  • 基于 Vue静态网站生成器 VuePress

    千次阅读 2018-07-31 13:48:43
    VuePress 是一个基于 Vue 的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。 它是为了满足 Vue 自己的子项目文档的需求而创建的。 VuePress 享用 Vue + webpack 开发环境,在 markdown 中使用 Vue ...

    VuePress 详细介绍

    VuePress 是一个基于 Vue 的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。 它是为了满足 Vue 自己的子项目文档的需求而创建的。

    VuePress 享用 Vue + webpack 开发环境,在 markdown 中使用 Vue 组件,并通过 Vue 开发自定义主题。VuePress 为每一个由它生成的页面提供预加载的 html,不仅加载速度极佳,同时对 seo 非常友好。一旦页面被加载之后,Vue 就全面接管所有的静态内容,使其变成一个完全的 SPA 应用,其他的页面也会在用户使用导航进入的时候来按需加载。

    # install
    npm install -g vuepress
    
    # create a markdown file
    echo '# Hello VuePress' > README.md
    
    # start writing
    vuepress dev
    
    # build to static files
    vuepress build
    展开全文
  • nginx部署VuePress静态个人博客

    千次阅读 2019-10-31 13:33:08
    nginx部署VuePress生成的静态博客 编译打包 yarn docs:build #编译打包 打包成功 nginx配置 location / { root html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } ...
  • vue引入静态js文件

    千次阅读 2020-06-18 13:22:04
    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。 vue-cli 2.0的作法是在...2.、在html文件下,
  • const link = document.createElement('a') link.style.display = 'none' link.href = "../../static/员工信息导入模板.xlsx" link.setAttribute('download', '员工信息导入模板.xls') document.body....
  • Vue 打包静态文件路径设置

    万次阅读 2018-10-18 09:17:53
    1、js,css的路径不对  ...以上是将文件打包在dist下的guoguo文件下,同时,打包的静态文件路径纸箱为guoguo/static/xxxxxx.css 相关文章:  https://www.cnblogs.com/diantao/p/7776523.html  ...
  • 修改vue.config.js中关于webpack的配置,保留index.html中的注释。原理可以看vue cli3官网关于webpack——修改插件选项部分的描述 chainWebpack: config => { config.plugin('html') .tap(args => { ...
  • Vue实现静态列表增删查功能

    千次阅读 2019-04-01 15:54:27
    知识点 1.双向数据绑定 2.自定义指令 3.自定义过滤器 4.v-for循环对象数组 5.ES6操作数组的新方法:forEach some filter ...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
  • 在使用vue-cli3创建项目的时候会发现没有了config文件夹,唯一能够进行配置的地方就只剩下vue.config.js文件了,而且还没有配置静态资源的地方 如果项目需要引入外部json html文件,则需要自己新建一个static文件夹...
  • 今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1、记得改一下...
  • vue项目静态资源,引用路径正确姿势

    千次阅读 2020-03-29 14:03:38
    1.插入图片代码 <img src="@/assets/images/adv.png"/> 2.插入背景图片代码 background: url(~@/assets/images/abobg.jpg) no-repeat top center;
  • Nginx作为静态资源服务器配置及使用前言编译安装NginxNginx相关命令nginx主要相关目录Nginx配置文件部署前端Vue项目可能出现的问题 前言 最近项目用的前后端分离架构,后端用的还是SSM,前端用的VUE+Node.js,但是在...
  • Vue static 静态资源路径 和 style问题

    千次阅读 2018-11-26 19:47:27
    // Paths ... // 静态资源输出到二级目录下 assetsSubDirectory: 'static', // 静态资源cdn地址 assetsPublicPath: '/', 引用的时候可直接,不用返回上一级去查找,因为编译输出后的 static...
  • vue静态资源打包

    千次阅读 2020-09-02 17:31:41
    vue项目打包后,可能大家会注意到,会把一些文件都编译压缩到一起,但是打包后我们通常很难再去修改某些东西。 场景一:单点登录。当我们需要把部署包部署到不同的环境,但是有些环境往往不需要登陆的操作,那常规...
  • vue静态文件引用注意事项

    千次阅读 2018-09-10 17:08:28
    assets文件夹与static文件夹的区别 ... assets中的文件再vue中的template/style下用./这种相对路径的形式进行引用,在script下必须用@import的方式引入,而static下的文件再.vue中的任何地方都只要使用../这种...
  • 把json文件改成js,里面的放的还是json,然后index.html里面script引入,然后赋值给Vue.prototype全局直接使用 静态文件 index里面引入 然后要用的地方 Vue.prototype.$dict = window.dict console.log(Vue...
  • vue静态资源加载

    2020-10-24 13:48:29
    在一个vue项目中分为两种静态资源: public目录:存放外部js、css等 src/assets目录:存放组件img、background-image引用的图片等静态资源 2.public静态资源 2.1 外部静态资源 这些静态资源包含了编译...
  • 首先看一下 vue 关于打包的配置文件 这里现在又两个关于 build 的文件夹 在经过对这几个文件进行排查之后,我发现 config 下的 index.js 是关于打包路径的重要配置文件 大概长这样 'use strict' //...
  • vue中index.html引用静态js

    千次阅读 2020-12-16 16:46:00
    vue中index.html引用静态js 修改环境:vue-cli 2.x index.html位置 默认在根目录下 也可通过以下方法修改 修改对应环境的template路径(初始为index.html) 修改为从根目录起,想要使用的index.html位置。...
  • 主要介绍了vue在index.html中引入静态文件不生效问题及解决方法,本文给大家分享两种原因分析,通过实例代码讲解的非常详细 ,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,217
精华内容 18,086
关键字:

vue转静态html

vue 订阅