码迷,mamicode.com
首页 > 其他好文 > 详细

Vue-项目搭建时的常用配置

时间:2019-05-20 19:20:13      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:port   ann   ext   err   export   name   lis   过程   rewrite   

1、Vue静态资源存放的选择

assets: 编译过程中会被webpack处理理解为模块依赖,只支持相对路径的形式,assets放可能会变动的文件。
static: 存放第三方文件的地方,不会被webpack解析,会直接被复制到最终的打包(默认是dist/static)下,必须使用绝对路径引用这些文件.static放不会变动的。

2、项目图标设置

  将icon-website.png的图标文件放到static文件夹内,在index.html的head中添加:

<link rel="shortcut icon" type="image/x-icon" href="static/icon-icon.png">

3、项目地址 去掉‘#‘

  项目搭建后,路径中会有个 ‘#‘ 号,如果想把 ‘#‘ 号去掉,需要把项目的路由方式设置为 history 模式;这种模式在页面刷新时会报错(404),需要在服务端设置相应配置。

export default new Router({
  mode: ‘history‘,        //设置history模式
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    }
  ]
})  

  Apache:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

  Nginx:

location/{
  try_files $uri $uri/ /index.html;
}

  原生Node.js

const http = require(‘http‘)
const fs = require(‘fs‘)
const httpPort = 80
http.createServer((req,res)=>{
    fs.readFile(‘index.htm‘,‘utf-8‘,(err,content)=>{
        if(err){
            console.log(‘We cannot open "index.htm" file.‘)
        }
        res.writeHead(200,{
            ‘Content-Type‘:‘text/html; charset=utf-8‘
        })
        res.end(content)
    })
}).listen(httpPort,()=>{
    console.log(‘Server listening on: http://localhost:%s‘,httpPort)
})

补充:什么是vue-router的history模式?

 

Vue-项目搭建时的常用配置

标签:port   ann   ext   err   export   name   lis   过程   rewrite   

原文地址:https://www.cnblogs.com/yangchin9/p/10895657.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!