精华内容
下载资源
问答
  • Vue官方说可以不通过ngin来部署,但是如果上生产环境,建议还是要走nginx 安装nginx 这里安装过程不再赘述,如果不清楚可以参考下面这篇文章 https://blog.csdn.net/qq_42815754/article/details/82980326 配置...
  • php部署vue项目

    2020-05-21 13:56:02
    其实不需要安装node环境 vue通过webpack打包的项目如下: 可以看到,只有一个dist文件,里面一个静态文件static,和一个入口文件 如果直接点击,什么都不显示:如下图 如果有php环境,这里以phpstudy为例,...

    前端vue写的项目,后端提供接口,打包过后不知道怎么运行

    其实不需要安装node环境

    vue通过webpack打包的项目如下:

    可以看到,只有一个dist文件,里面一个静态文件static,和一个入口文件

    如果直接点击,什么都不显示:如下图

     

    如果有php环境,这里以phpstudy为例,只需解析域名到index.html即可

     

    这样在运行刚设置的域名就行了,如下图

     

    设置两个域名会有跨域问题,后端解决下就行了,不会自行百度

    展开全文
  • 首先你要安装好nodejs和yarn,直接在官网下载安装包,一键安装即可,不需要什么环境配置,我安装的是最新版本(node-v10.13.0、yarn-1.12.3) 2、安装 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3,而自己...

    1、前提
    首先你要安装好nodejs和yarn,直接在官网下载安装包,一键安装即可,不需要什么环境配置,我安装的是最新版本(node-v10.13.0、yarn-1.12.3)

    2、安装
    同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3,而自己学习的GitHub上的项目为2~
    2.1 新版本 Vue CLI 3
    写这篇文章的时候官网默认的为Vue CLI 3
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    2.2 旧版本 Vue CLI 2

    3、创建项目
    Vue CLI 3:

    vue create hello-world

    Vue CLI 2:

    vue init webpack my-project

    一直按回车为默认选项,手动设置请参考官方文档
    4、运行项目
    Vue CLI 3:
    cd hello-world
    yarn serve
    Vue CLI 2:

    cd my-project/
    npm run dev
     


    5、验证

    在浏览器输入localhost:8080,看见下图图所示的效果即为成功

    6、构建
    yarn build
    # OR
    npm run build
      会生成一个dist文件夹


    7、部署

     

    7.1 本地预览
    dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 baseUrl 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve

    安装serve:

    npm install -g serve

    启动:

    serve -s dist
    INFO: Accepting connections at http://localhost:5000

    预览:http://localhost:5000

    7.2 部署到tomcat
    默认的配置直接部署到tomcat,是有错误的(在浏览器检查里发现是找不到对应的静态文件,原因是路径不对),需要修改一下配置,版本2和版本3的配置也不一样

    Vue CLI 3:
    在hello-world新建vue.config.js,并添加如下内容

    module.exports = {
      baseUrl: process.env.NODE_ENV === 'production'
        ? '/hello-world/'
        : '/'
    }

    这里参考官方文档:https://cli.vuejs.org/zh/guide/deployment.html#platform-guides

    Vue CLI 2:
    找到my-project/config/index.js文件中build对应的assetsPublicPath键值,将其修改为

    assetsPublicPath: './',

    这里参考:https://blog.csdn.net/Dear_Mr/article/details/72871919

    重新build,将生成的dist文件夹复制到tomcat目录下的webapps文件夹下,可以将dist文件夹改名为hello-world,那么访问路径就为
    ip/hello-world,也可以不改名那么访问路径就为ip/dist,效果查看vue.dongkelun.com/hello-world、vue.dongkelun.com/dist

    8、其他问题
    8.1 npm run dev启动后,用Ctrl+c,关闭不了对应的进程
    原因是在Git Bash Here里执行的命令,一种方法是在windows 的shell里执行命令(输入cmd进入),另一种办法是如果不想放弃git的命令行的话,每次启动完用tskill node杀死进程。

    8.2 依然想用 npm run dev 启动上面的hello world程序
    办法是修改package.json文件,找到scripts下的”serve”: “vue-cli-service serve”,复制这一行到下一行将key(serve)改为dev即可

    自己可以对比一下,两个版本的package.json文件的差异,多尝试一下就了解了
     

    展开全文
  • 几个月前,公司要求(服务端渲染)——用vue-ssr做了个服务端渲染,从起搭建、开发、部署、浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习。——几个月过去了,公司又提出,...

    几个月前,公司要求(服务端渲染)——用vue-ssr做了个服务端渲染,从起搭建、开发、部署、浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习。——几个月过去了,公司又提出,不希望用vue,或是react或angular的ssr,希望用express + 引擎模板 做纯的html的服务端渲染,这个我下次分享,有兴趣的小伙伴可以一起交流学习。

    一.前提(为什么使用vue-ssr)

    • 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
    • 更快的内容到达时间,特别是对于缓存的网络情况或运行缓慢的设备

    二.使用服务端渲染的权衡 (应注意的情况)

    • 开发条件所限。一些浏览器的特定代码,只能在某些生命周期钩子函数中使用(node环境只能使用vue的beforeCreate 与 created 生命周期),例如document的操作可以在mounted生命周期中操作;
    • 涉及构建设置与部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同,服务端渲染应用程序,需要处于 node.js server 运行环境
    • 更多的服务端负载。 在Node.js中渲染完整的应用程序,显然会比仅仅提供静态资源的 server 更加大量占用 CPU 资源,因此如果在高流量环境下使用,要准备相应的服务器负载,并采取缓存策略

    三.使用vue-cli 2.0 修改配置 搭建 ssr 框架以及开发

    1.首先用vue-cli2.0 搭建出你想要的命名项目 例如

    vue init webpack vue-ssr-test
    

    · webpack 配置

    2.修改vue-loader.conf.js

    将extract的值设置为false,因为服务器端渲染会自动将CSS内置。如果使用该extract,则会引入link标签载入CSS,从而导致相同的CSS资源重复加载

    -    extract: isProduction
    +    extract: false
    

    3.修改webpack.base.conf.js

    只需修改entry入门配置即可

    - app: './src/main.js'
    + app: './src/entry-client.js'
    

    4.修改webpack.prod.conf.js

    包括应用vue-server-renderer、去除HtmlWebpackPlugin、增加client环境变量

    ...
    + const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
    ...
        new webpack.DefinePlugin({
          'process.env': env,
    +     'process.env.VUE_ENV': '"client"'
        }),
    ...
    -    new HtmlWebpackPlugin({
    -      filename: config.build.index,
    -      template: 'index.html',
    -      inject: true,
    -      minify: {
    -        removeComments: true,
    -        collapseWhitespace: true,
    -        removeAttributeQuotes: true
    -        // more options:
    -        // https://github.com/kangax/html-minifier#options-quick-reference
    -      },
    -      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    -      chunksSortMode: 'dependency'
    -    }),
    ...
    +    new VueSSRClientPlugin()
    ...
    

    5、新增 webpack.server.conf.js

    const webpack = require('webpack')
    const merge = require('webpack-merge')
    const nodeExternals = require('webpack-node-externals')
    const baseConfig = require('./webpack.base.conf.js')
    const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
    
    module.exports = merge(baseConfig, {
      entry: './src/entry-server.js',
      target: 'node',
      devtool: 'source-map',
      output: {
        libraryTarget: 'commonjs2'
      },
      externals: nodeExternals({
        whitelist: /\.css$/
      }),
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
          'process.env.VUE_ENV': '"server"'
        }),
        new VueSSRServerPlugin()
      ]
    })
    

    ·入口配置

    在浏览器端渲染中,入口文件是main.js,而到了服务器端渲染,除了基础的main.js,还需要配置entry-client.js和entry-server.js

    6.修改main.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    -  import '@/assets/style.css'  //这里删除全局样式,然后直接写在app.vue组件内
    import App from './App'
    -  import router from './router'
    + import createRouter from './router'
    -  import store from './store'
    + import createStore from './store'
    import async from './utils/async'
    Vue.use(async)
    - new Vue({
    + export default function createApp() {
    +  const router = createRouter()
    +  const store = createStore()
    +  const app = new Vue({
    -   el: '#app',
        router,
        store,
    -   components: { App },
    -   template: '<App/>'
    +   render: h => h(App)
      })
    + return { app, router, store }
    +}
    

    7.新增entry-client.js

    后面会介绍到asyncData方法,但是asyncData方法只能用于路由绑定的组件,如果是初始数据则可以直接在entry-client.js中获取

    import Vue from 'vue'
    import createApp from './main'
    
    Vue.mixin({
      beforeRouteUpdate (to, from, next) {
        const { asyncData } = this.$options
        if (asyncData) {
          asyncData({
            store: this.$store,
            route: to
          }).then(next).catch(next)
        } else {
          next()
        }
      }
    })
    
    const { app, router, store } = createApp()
    
    /* 获得初始数据 */
    import { LOAD_CATEGORIES_ASYNC } from '@/components/Category/module'
    import { LOAD_POSTS_ASYNC } from '@/components/Post/module'
    import { LOAD_LIKES_ASYNC } from '@/components/Like/module'
    import { LOAD_COMMENTS_ASYNC } from '@/components/Comment/module'
    import { LOAD_USERS_ASYNC } from '@/components/User/module'
    (function getInitialData() {
      const { postCount, categoryCount, userCount, likeCount, commentCount } = store.getters
      const { dispatch } = store
      // 获取类别信息
      !categoryCount && dispatch(LOAD_CATEGORIES_ASYNC),
      // 获取文章信息
      !postCount && dispatch(LOAD_POSTS_ASYNC),
      // 获取点赞信息
      !likeCount && dispatch(LOAD_LIKES_ASYNC),
      // 获取评论信息
      !commentCount && dispatch(LOAD_COMMENTS_ASYNC),
      // 获取用户信息
      !userCount && dispatch(LOAD_USERS_ASYNC)
    })()
    
    if (window.__INITIAL_STATE__) {
      store.replaceState(window.__INITIAL_STATE__)
    }
    
    router.onReady(() => {
      router.beforeResolve((to, from, next) => {
        const matched = router.getMatchedComponents(to)
        const prevMatched = router.getMatchedComponents(from)
        let diffed = false
        const activated = matched.filter((c, i) => {
          return diffed || (diffed = (prevMatched[i] !== c))
        })
        if (!activated.length) {
          return next()
        }
        Promise.all(activated.map(c => {
          if (c.asyncData) {
            return c.asyncData({ store, route: to })
          }
        })).then(() => {
          next()
        }).catch(next)
      })
      app.$mount('#app')
    })
    

    8.新增entry-sever.js

    import createApp from './main'
    
    export default context => new Promise((resolve, reject) => {
      const { app, router, store } = createApp()
      router.push(context.url)
      router.onReady(() => {
        const matchedComponents = router.getMatchedComponents()
        if (!matchedComponents.length) {
          return reject({ code: 404 })
        }
        Promise.all(matchedComponents.map(Component => {
          if (Component.asyncData) {
            return Component.asyncData({
              store,
              route: router.currentRoute
            })
          }
        })).then(() => {
          context.state = store.state
          resolve(app)
        }).catch(reject)
      }, reject)
    })
    

    ·修改组件

    由于代码需要在服务器端和浏览器端共用,所以需要修改组件,使之在服务器端运行时不会报错

    9.修改router路由文件

    给每个请求一个新的路由router实例

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    + export default function createRouter() {
    - export default new Router({
    +   return new Router({
         mode: 'history',
         routes: [
           {
             path: '/',
             component: () => import(/* webpackChunkName:'home' */ '@/components/Home/Home'),
             name: 'home',
             meta: { index: 0 }
           },
        ...
         ]
      })
    +}
    

    10.修改状态管理vuex文件

    给每个请求一个新的vuex实例

    import Vue from 'vue'
    import Vuex from 'vuex'
    import auth from '@/components/User/module'
    ...
    
    Vue.use(Vuex)
    + export default function createStore() {
    - export default new Vuex.Store({
    +   return new Vuex.Store({
        modules: {
          auth,
         ...
        }
      })
    +}
    

    11.使用asyncData方法来获取异步数据

    要特别注意的是,由于asyncData只能通过路由发生作用,使用是非路由组件的异步数据获取最好移动到路由组件中  如果要通过asyncData获取多个数据,可以使用Promise.all()方法

    asyncData({ store }) {
        const { dispatch } = store
        return Promise.all([
          dispatch(LOAD_CATEGORIES_ASYNC),
          dispatch(LOAD_POSTS_ASYNC)
        ])
    }
    

    如果该异步数据是全局通用的,可以在entry-client.js方法中直接获取

    将TheHeader.vue通用头部组件获取异步数据的代码移动到entry-client.js方法中进行获取

    // TheHeader.vue
      computed: {
        ...
    -    ...mapGetters([
    -      'postCount',
    -      'categoryCount',
    -      'likeCount',
    -      'commentCount',
    -      'userCount'
    -    ])
      },
    -  mounted() {
        // 获取异步信息
    -    this.loadAsync()
      ...
    -  },
    ...
      methods: {
    -    loadAsync() {
    -      const { postCount, categoryCount, userCount, likeCount, commentCount } = this
    -      const { dispatch } = this.$store
    -      // 获取类别信息
    -      !categoryCount && dispatch(LOAD_CATEGORIES_ASYNC)
    -      // 获取文章信息
    -      !postCount && dispatch(LOAD_POSTS_ASYNC)
    -      // 获取点赞信息
    -      !likeCount && dispatch(LOAD_LIKES_ASYNC)
    -      // 获取评论信息
    -      !commentCount && dispatch(LOAD_COMMENTS_ASYNC)
    -     // 获取用户信息
    -      !userCount && dispatch(LOAD_USERS_ASYNC)
    -    },
    

    将Post.vue中的异步数据通过asyncData进行获取

    // post.vue
    ...
    export default {
    +  asyncData({ store, route }) {
    +    return store.dispatch(LOAD_POST_ASYNC, { id: route.params.postid })
    +  },
    ...
    -  mounted() {
    -    this.$store.dispatch(LOAD_POST_ASYNC, { id: this.postId })
    -  },
    ...
    

    12.将全局css从main.js移动到App.vue中的内联style样式中,因为main.js中未设置css文件解析

    // main.js
    - import '@/assets/style.css'
    // App.vue
    ...
    <style module lang="postcss">
    ...
    </style>
    

    13.由于post组件的模块module.js中需要对数据通过window.atob()方法进行base64解析,而nodeJS环境下无window对象,会报错。于是,代码修改如下

    // components/Post/module
    - text: decodeURIComponent(escape(window.atob(doc.content))) 
    + text: typeof window === 'object' ? decodeURIComponent(escape(window.atob(doc.content))) : ''
    

    ·服务器配置

    14、在根目录下,新建server.js文件

    由于在webpack中去掉了HTMLWebpackPlugin插件,而是通过nodejs来处理模板,同时也就缺少了该插件设置的HTML文件压缩功能

    需要在server.js文件中安装html-minifier来实现HTML文件压缩

    const express = require('express')
    const fs = require('fs')
    const path = require('path')
    const { createBundleRenderer } = require('vue-server-renderer')
    const { minify } = require('html-minifier')
    const app = express()
    const resolve = file => path.resolve(__dirname, file)
    
    const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
      runInNewContext: false,
      template: fs.readFileSync(resolve('./index.html'), 'utf-8'),
      clientManifest: require('./dist/vue-ssr-client-manifest.json'),
      basedir: resolve('./dist')
    })
    app.use(express.static(path.join(__dirname, 'dist')))
    app.get('*', (req, res) => {
      res.setHeader('Content-Type', 'text/html')
      const handleError = err => {
        if (err.url) {
          res.redirect(err.url)
        } else if (err.code === 404) {
          res.status(404).send('404 | Page Not Found')
        } else {
          res.status(500).send('500 | Internal Server Error')
          console.error(`error during render : ${req.url}`)
          console.error(err.stack)
        }
      }
    
      const context = {
        title: 'SSR-VUE-CLI',
        url: req.url
      }
      renderer.renderToString(context, (err, html) => {
        console.log(err)
        if (err) {
          return handleError(err)
        }
        res.send(minify(html, { collapseWhitespace: true, minifyCSS: true}))
      })
    })
    
    app.on('error', err => console.log(err))
    app.listen(8989, () => {
      console.log(`vue ssr started at localhost: 8989`)
    })
    

    15.修改package.json文件

    -     "build": "node build/build.js",
    +    "build:client": "node build/build.js",
    +    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules",
    +    "build": "rimraf dist && npm run build:client && npm run build:server",
    

    16.修改index.html文件

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <link rel="shortcut icon" href="/static/favicon.ico">
        <title>小火柴的蓝色理想</title>
      </head>
      <body>
         <!--vue-ssr-outlet-->   //主要是这里
      </body>
    </html>
    

    17.取消代理

    如果继续使用代理如/api代理到后端接口,则可能会报如下错误

    error:connect ECONNREFUSED 127.0.0.1:80
    

    直接写带有http的后端接口地址即可

    const API_HOSTNAME = 'http://192.168.1.103:4000'
    

    ·测试

    18.安装依赖包

    npm install --save-dev vue-server-renderer express
    

    19.构建

    npm run build
    

    20.运行

    node server.js、
    

    点击右键,查看网页源代码。结果如下,说明网站已经实现了服务器端渲染 

    四.部署生产环境

    1.使用 pm2 对node程序进行守护

    全局安装pm2 (其依赖node 和 npm, 可以自行研究 pm2 的使用)

    npm install pm2 -g
    

    由于该网站需要守护nodejs程序,使用pm2部署较为合适

    在项目根目录下,新建一个ecosystem.json文件,内容如下

    {
      "apps" : [{
        "name"      : "vue-ssr-test",  //项目名称
        "script"    : "./server.js",  //启动服务的js脚本
        "env": {   //配置的环境
          "COMMON_VARIABLE": "true"
        },
        "env_production" : {    //生产环境
          "NODE_ENV": "production"
        }
      }],
      "deploy" : {   //配置自动化的指令
        "production" : {
          "user" : "xxx",    // 购买的服务器的用户名
          "host" : ["1.2.3.4"],   // 服务器的ip地址
          "port" : "22",    // 服务器的端口号
          "ref"  : "origin/master",   //代码管理的远程分支
          "repo" : "git@github.com:littlematch0123/blog-client.git",  //代码管理的远程仓库地址
          "path" : "/home/xxx/www/mall",   //在服务器中静态资源的存放路径
          "post-deploy" : "source ~/.nvm/nvm.sh && cnpm install && pm2 startOrRestart ecosystem.json --env production",  //自定义的启动自动化的指令
          "ssh_options": "StrictHostKeyChecking=no",
          "env"  : {
            "NODE_ENV": "production"   //该自动指令的环境
          }
        }
      }
    }
    

    2.cdn、也就是说我们需要将我们的项目放到服务器里面去 (例如我这里)

    首先在本地打包dist 【执行npm run build】

    然后将所需要的文件或文件夹上传到服务器 【我这里用的是 FileZilla 软件】

    dist 文件夹
    server.js
    package.json
    index.template.html
    ecosystem.json
    

     

    3、nginx 代理

    如果要使用域名对项目进行访问,还需要进行nginx配置 

    通过以上步骤就可以将我们的项目部署到线上了

    五: 浏览器渲染

    官网的代码中,如果使用开发环境development,则需要进行相当复杂的配置

    能否应用当前的webpack.dev.conf.js来进行开发呢?完全可以,开发环境中使用浏览器端渲染,生产环境中使用服务器端渲染需要做出如下三点更改:

    1、更改API地址,开发环境使用webpack代理,生产环境使用上线地址

    // src/constants/API
    let API_HOSTNAME
    if (process.env.NODE_ENV === 'production') {
      API_HOSTNAME = 'https://pc.zhumanyao.com'
    } else {
      API_HOSTNAME = '/api'
    }
    

    2.在index.html同级目录下,新建一个index.template.html文件,index.html是开发环境的模板文件,index.template.html是生产环境的模板文件

    // index.html
      <body>
        <div id="app"></div>
      </body>
    
    // index.template.html
      <body>
         <!--vue-ssr-outlet-->
      </body>
    

    3、更改服务器端入口文件server.js的模板文件为index.template.html

    // server.js
    const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
      runInNewContext: false,
      template: fs.readFileSync(resolve('./index.template.html'), 'utf-8'),
      clientManifest: require('./dist/vue-ssr-client-manifest.json'),
      basedir: resolve('./dist')
    })
    

    经过简单的更改,即可实现开发环境使用浏览器端渲染,生产环境使用服务器端渲染的效果

    六、SEO优化方案

    1、图片格式

    对于图片:(1)如果可以用精灵图的用精灵图——减少http请求;

    (2)也可以将其转换成base64格式——这样他可以可js一起加载,同样减少http请求;

    (3)再大点的图片,就可以利用浏览做缓存

    2、服务端渲染的数据

    服务端渲染的数据,我们要放在created 生命周期函数里面——保证源码可以看到

    3、js的需求

    对于页面对js的请求;在head部分中都是 preload 或 prefetch;他们的作用分别是高数浏览器 哪些是当前路由页面必须要用的js; 哪些是接下来页面要用,可以预加载(在浏览器空闲时加载)

    4、路由的传参方式

    这里最好是利用 /url/:id 方式,这样对seo友好;

    5、页面首页的链接数

    在首页最好是有外链,即:当首页最好有连接可以跳转到其他页面。(这里的连接是要直接嵌入在页面内,最好不用编程式。有利于SEO);但是当外链是跳出当前网站,在需要在连接上加el="nofollow" 属性;阻止爬虫去爬取,因为爬虫一旦爬出去,就不会再回来。 (为了seo优化,其他页面有连接也直接嵌入式的写入写页面)

    6、多用语义化标签

    这里我们多使用语义化标签 header、footer、section、h1~h6、article等,这样可以让爬虫直接抓取内容,对seo友好

    7、设置TDK

    每个页面都需要设置自己的tdk(title、description、keywords),这对seo优化起关键作用

    8、符合XML标准

    所有的单标签,都需要在尾部添加 '/';

    等等,这里还有很多其他优化方案————(也用于其他部分)

    七、动态设置TDK

    在vue的服务端渲染中,如何动态设置tdk?

    1、在src目下的建一个 /utils/head.js

    // head.js
    function getHead (vm) {
      const { head } = vm.$options;
      if (head) {
        return typeof head === 'function' ?
          head.call(vm) :
          head;
      }
    }
    const serverHeadMixin = {
      created () {
        const head = getHead(this);
        if (head) {
          if (head.title) this.$ssrContext.title = `${head.title}`;
          if (head.keywords) this.$ssrContext.keywords = head.keywords;
          if (head.description) this.$ssrContext.description = head.description;
        }
      }
    };
    
    const clientHeadMixin = {
      mounted () {
        const head = getHead(this);
        if (head) {
          if (head.title) document.title = `${head.title}`;
          if (head.keywords) document.querySelector('meta[name="keywords"]').setAttribute('content', head.keywords);
          if (head.description) document.querySelector('meta[name="description"]').setAttribute('content', head.description);
        }
      }
    };
    
    export default process.env.VUE_ENV === 'server' ?
      serverHeadMixin :
      clientHeadMixin;
    

    2、在server.js 里新增 //server.js

    const context = {
    +    title: '',
         url: req.url,
    +    keywords: '',
    +    description: '',
      }
    

    3、在 index.template.html 里

    //index.template.html
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    +    <meta name='keywords' content='{{keywords}}'>
    +    <meta name='description' content='{{description}}'>
        <link rel="shortcut icon" href="./static/logo-icon.png">
        <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=ttvedgC1rj7yoVihmTA8LbVLMOg8WSwv"></script>
    +    <title>{{title}}</title>
      </head>
      <body>
        <!--vue-ssr-outlet-->
      </body>
    </html>
    

    4、在main.js 或 app.js 里面全局引入

    // app.js
    
    + import headMixin from './utils/head';
    + Vue.mixin(headMixin);
    

    5、在组件汇总使用

    // home.vue
    export default {
        name: 'home',
        data () {
            return {
                
            }
        },
    +    head () {
    +        return {
    +            'title': '首页',
    +            'keywords': '关键词',
    +            'description': '描述'
    +        }
    +    },
        ...
    }
    

    6、动态设置tdk (即: 页面的内容是来势与后台,或根据id得到的)

    // detail.vue    'detail/:id'
    

    (1) 在utils下建tdk.js

    // tdk.js
    const tdk = (url) =>  {
      if (url === 'goods_0000') {
        return fill('深迪科技企业级BOM管理', 'bom,主数据,配置,变更管理,生命周期,EBOM,MBOM', '面向未来智能制造以及大规模个性化定制业务,构建一个全面支持正向研发体系、致力提升内部核心能力和灵活应对外部环境变化的完整的BOM管理体系。')
      } else if (url === 'goods_0001') {
        return fill('深迪科技MES', 'MES,制造执行系统,追溯,看板,安灯,工单,上料防错', '深迪MES的优点是精确的JIT式拉动生产。适用于大批量小批次的离散加工。')
      } else if (url === 'case_000000') {
        return fill('深迪科技BOM管理系统案例', 'BOM,主数据,工艺,配置,变更管理,生命周期,EBOM,MBOM,整车物料管理', 'XBOM系统解决JAC工厂工艺与MBOM结合的问题,支撑工艺断点管理需求,可适应以后其他代工工厂同类问题;作为整车物料号管理的源头,完成了整车号生成规则管理、整车号管理以及与下游系统的集成。')
      } else if (url === 'case_000100') {
        return fill('深迪科技MES系统案例', 'MES,JIT,价值流,工单,车间计划,车间拉料,看板', '深迪与美的携手打造,它是深迪MES以价值链维度展开的应用,倍受好评与青睐。')
      } else if (url === 'case_000101') {
        return fill('深迪科技MES系统案例', 'MES,ERP集成,打通ERP,andon,系统集成,工业4.0,生产订单', '深迪与百年德企快可美携手打造,它是深迪MES在德系工业4.0中的实际应用。')
      }
    }
    function fill(title, keywords, description) {
      return {title: `${title}`, keywords: `${keywords}`, description: `${description}`}
    }
    
    export default tdk
    

    (2) 在 detail.vue

    //detail.vue
    <script>
    ...
    + import tdk from '@/utils/tdk'
    ...
    export default {
        name: 'detail',
        data () {
            return {
                ...
    +            tdk: tdk(this.$route.params.id)
            }
        },
    +    head () {
    +        return {
    +            'title': this.tdk.title,
    +            'keywords': this.tdk.keywords,
    +            'description': this.tdk.description
    +        }
    +    },
        watch: {
            '$route'(to, from) {
    +            this.tdk = tdk(this.$route.params.id)
                ...
            }
        },
        ...
        methods: {
           ... 
        }
    }
    </script>
    展开全文
  • 项目部署起来还是很方便的只需要安装JDK(必须的环境,这个不用多说了吧)和Nginx的安装以及配置文件的配置。 1、安装JDK8 为了省时,我采用的懒人安装法,yum安装。 由于时间原因,就不多做赘述,百度一下一大堆。 ...

    由于最近这两天没有什么事情,经理让我把目前正在写的项目(半成品)部署到线上,由于本人还是菜鸟一枚,之前也没接触过,所以也是网上查资料从零开始部署。项目部署起来还是很方便的只需要安装JDK(必须的环境,这个不用多说了吧)和Nginx的安装以及配置文件的配置。

    1、安装JDK8

    为了省时,我采用的懒人安装法,yum安装。
    由于时间原因,就不多做赘述,百度一下一大堆。

    2、Nginx安装

    采用的weget方式直接下载压缩包,进行解压安装。
    安装前需要先安装依赖。

    yum -y install pcre* 
    
    yum -y install openssl*
    

    在使用weget之前如果没有提示不是内部的命令,安装weget

    yum install weget
    

    然后创建一个跟目录,例如 /usr/local/nginxFile

    然后使用weget下载下来(我是用的是1.16.1的版本),如下

    weget  http://nginx.org/download/nginx-1.16.1.tar.gz
    

    然后解压缩

    tar -zxvf Nginx压缩文件
    
    如果提示tar不是内部的命令 
    yum install tar  安装
    

    然后进入加压文件的根目录。

    cd nginx-1.16.1
    

    执行编译

    ./configure(这个是默认安装方式,由于时间原因,后续会给出指定用户以及依赖版本的安装方式)
    

    如果编译失败说明没有编译环境,安装一下

    yum -y install gcc make gcc-c++ openssl-devel wget
    

    最后

    make
    make install
    

    接下来就是配置Nginx的配置文件
    (这里博主遇到一个大坑,犯了一个低级错误,并不是说解压之后当前Nginx文件就是编译好的文件,其实编译好的在/usr/local/nginx文件夹下,就这一个小细节,导致我打包好的项目放错位置,然后还检查不出来问题,好几个小时都没解决,/(ㄒoㄒ)/~~)

    cd /usr/local/nginx/conf/
    
    # 一般情况下我们都会把原始的配置文件复制一份保存,所以在配置前就先
    cp nginx.conf nginx.conf.copy
    
    接下来就可以
    vim nginx.conf
    

    配置文件的配置暂时不写,后面有时间写。

    假设我们已经配置好,下面就是启动nginx

    cd /usr/local/nginx/sbin
    
    #启动命令
    ./nginx  
    
    查看是否启动成功
     ps -ef | grep nginx
    # 停止命令
    ./nginx -s stop
    # 重新加载配置文件命令
    ./nginx -s reload
    

    启动完成之后,由于是部署在阿里云上,需要把配置的端口开放了,这个由于时间原因,先不写了,就是开放安全组。

    接下来开放后,浏览器输入

    ip:端口
    

    如果进入到了nginx界面,就代表Nginx安装完成。

    3、前端打包部署到Nginx

    打包

    npm run bulid
    如果不行看一下配置文件
    也可能是
    npm run bulid:prod
    

    打包完成后会生成一个dist文件夹,压缩成压缩文件
    上传到/usr/local/nginx/html下,解压缩dist压缩文件。然后再去配置文件中进行配置,注意此时根路径是 html/dist。然后进入到/usr/local/nginx/sbin

    ./nginx -s reload
    

    然后浏览器

    ip:端口号
    

    当进入项目入口界面时代表部署完成

    4、后端部署

    后端代码需要注意的是,由于是前后端分离部署,后端需要打成jar包,找到父级pom文件,如果时war,修改成jar。
    有多种打包方式,我采取的时命令行打包

    
    # 跳过测试类进行打包
    mvn clean package -Dmaven.test.skip = true
    

    然后把jar包上传到linux。
    随便创建一个文件夹作为根目录

    mkdir /usr/local/projec
    rz 选择咱们打包好的jar
    java -jar jar包
    

    到这后端代码部署完成

    如果想要在后台运行(关闭xshell工具或者窗口仍然在后台运行)

    unhop java -jar jar包 &
    

    此时没啥问题
    就可以正常使用系统了。

    5、Nginx开机自启

    由于时间原因 星期天找个时间写

    展开全文
  • vue环境的搭建

    2018-11-10 22:53:00
    一、首先要安装nodejs : 别去官网下,慢的要死,这是国内的什么版本都有...其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_globa...
  • VueCLI3.0的介绍以及安装使用在这里不再赘述,本篇文章主要探讨使用VueCLI3.0的项目怎么进行打包部署需要做怎样的配置,以及部署到服务器上有什么问题,问题是如何解决的。VueCLI3.0之打包(build)VueCLI3.0的环境...
  • VueVue CLI

    2020-02-18 14:24:47
    使用Vue CLI开发大型项目时,需要考虑代码目录结构、项目结构和部署、热加载、单元测试等,脚手架能够帮助我们完成这些事情。 使用vue-cli可以快速搭建Vue开发环境,以及对应的webpack配置 2、使用前提 Node环境...
  • 什么Vue-cli vue-cli是官方提供的一个脚手架,在创建Maven时创建一个骨架项目,这个骨架项目就是脚手架,用于快速创建一个vue的项目模板 主要功能 统一的目录结构 本地部署部署 单元测试 集成打包上线 准备...
  • 测试环境、本地环境、正式环境、阶段性提交环境同时并存,是否已经厌烦了这种每次需要改代码的配置和地址方式? 先上效果图 第一套启动环境 第一套部署环境 第二套启动环境 第二套部署环境 ok,到现在,你应该...
  • 基于node-scp2的自动化部署方案 背景 基于node-scp2的自动化部署方式 基于node-scp2方式的自动化部署,只需要在创建项目阶段配置好前...在windows上执行需要依托Node环境,最低版本为 v0.8.7。 自动化部署流程 第一步
  • 什么需要配置多种环境变量 一个产品的开发过程中,一般来说都是会经历这么一个过程.本地发开--测试版本部署--测试--预上线--正式上线.对应的每一个环节中的服务器地址,接口地址...都会不一样。那么我们需要怎么去...
  • 注:导入项目教程 0基础适用 1.node,js是什么? 如果说相当于java中的jdk 那就很清晰了,使js脱离浏览器 可以运行的环境,下载地址:... (需网上 下载maven 注意maven需要配置环境变量) 打开项目之后
  • 1.什么Vue-cli 如果你只是写几个简单的Demo程序就不需要用到Vue cli 使用脚手架开发大型应用时,我们需要考虑代码结构、项目结构和部署、热加载、代码单元测试等事情 使用脚手架工具来配置 使用vue cli可以快速...
  • 文章目录7.1、什么vue-cli7.2、需要环境 7.1、什么vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构即基础代码,就好比咱们在创建Maven项目时可以选择创建一个...
  • vue-cli (Vue.js快速开发)

    2020-09-23 09:34:19
    九、第一个vue-cli项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 1. 什么vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板...2. 需要环境 Node.js : http://nodejs.cn/download/
  • vue-cli

    2021-02-27 22:41:09
    一、什么vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发...
  • Vue之第一个vue-cli项目

    2020-10-08 10:44:06
    1、什么vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加...
  • 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些...
  • Vue-cli

    2021-01-15 19:16:38
    什么vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的...
  • 文章目录第一个vue-cli项目 第一个vue-cli项目 什么vue-cli vue-cli是官方提供的一个脚手架,用于快速生成一个vue的项目模板; ...需要环境 Node.js: Node.js:http://nodejs.cn/download/
  • // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2 UEDITOR_HOME_URL: '/static/...
  • 八、VUE CLI

    2020-11-24 13:53:52
    使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些...
  • 1、什么vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加...
  • 1、什么vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;   预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的...
  • 1、什么vue-cli   vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;   预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们...
  • Springboot项目与vue项目整合打包

    千次阅读 2019-05-09 11:01:14
    1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等。因此在这种情况下尽量减少部署时的服务...
  • 总结2:npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外)。意思...
  • 使用 vue 开发大型项目时,我们需要考虑代码目录结构。项目结构和部署,热加载、代码单元测试等事情。 通常我们会使用一些脚手架工具来提高开发效率。 (二)CLI 是什么 CLI 是 Command-Line Interface 的简写,...

空空如也

空空如也

1 2 3 4 5
收藏数 96
精华内容 38
关键字:

vue部署需要什么环境

vue 订阅